Vue-multiselect: "Options passed to vue-multiselect do not contain groups, despite the config"

[Drillan767]

Hello,
I want to use vue-multiselect to allow a user to choose a Fontawesome 5 icon.
To do so, I'm importing a kinda huge JSON file, that I pass as an option to Vue-MultiSelect.
Since there are categories, I found out how to set this up in my JSON file and made it look like follows:

[
  {
    "category": "Accessibility",
    "icons": [
      {
        "name": "fab fa-accessible-icon"
      },
      {
        "name": "fas fa-american-sign-language-interpreting"
      },
      {
        "name": "fas fa-assistive-listening-systems"
      }
    ]
  }
]

Then I set up the Vue Multiselect as follows:

<div class="form-group col-sm-5">
  <vue-multiselect
    :options="icons"
    :close-on-select="true"
    v-model="sm.icon"
    :group-select="true"
    group-label="category"
    group-values="icons"
    rack-by="name"
    label="name"
  >
      <template
        slot="singleLabel"
        slot-scope="props"
      >
        <span>
          <i :class="props.option.name"></i>
          {{ cleaned(props.option.name) }} // Allows me to make the classes readable
        </span>
      </template>
      <template
        slot="option"
        slot-scope="props"
      >
        <span v-if="props.option.$isLabel">
          {{ props.option.$groupLabel }}
        </span>
        <span :class="props.option.class" v-else>
          <i :class="props.option.name"></i>
          {{ list(props.option.name) }} // Allows me to make the classes readable
        </span>
      </template>
    </vue-multiselect>
</div>

Everything works, but I keep having the following warning in my console:

Options passed to vue-multiselect do not contain groups, despite the config.

What didn't I do? The group name is showing up nicely and seems to behave as expected

Thank you in advance

[shentao]

That is weird. Would you be able to create JSFiddle with that?

[Drillan767]

Hello, I apologize for the time it took, I had struggles to set everything up inside a JS Fiddle, so I switched to a Code SandBox, on which I can reproduce this anomaly (check the "console' at the bottom of your screen).

Here is the link: https://codesandbox.io/s/14pw28xjpl

Thank you in advance

[shentao]

Seems the warning is thrown despite the fact that it shouldn’t. Will need some time to investigate the issue probably early next month. Please ignore the warning for the time being :(

[Drillan767]

No problem, thank you :relaxed:

[anilkumarmvsnd]

Even i face the same issue ... is any update on it

[rioadrian]

Hi is this issue have been solved? coz I face the same too. Please update.... Thanks in advance

[VladanZ]

Same problem here. It seems to be problem if you use templates for singleLabel and option.
Did anyone found a solution?

[janswist]

Yes, if using standard html (not pug) notation then getting rid of commas worked for me: https://jsfiddle.net/kehmjnxu/1/