how to display an array of objects where values are also an array

Question

I am using vue-select and I am looking to display my select box like this:

label 1
    item 1
    item 2
    item 3
    item 4
label 2
    item 1
    item 2
    item 3
    item 4
etc.etc.

Expecting:

labels can't be selected and only items can be selected
on selection sends back {label:value} (strings)

I've built my JSON as follows:

[
   {
      "label":"one",
      "values":[
         "value 1",
         "value 2",
         "..."
      ]},
      {"label":"two",
      "values":[
         "value 1",
         "value 2",
         "..."
      ]},
      "..."
   }
]

Which is exactly the format requested, yet for some reason I am not using one of their props right. Would appreciate a nudge here if you came across this already, thanks.

sorry for the wrong answer, please provide a running code in codepen in order to debug it — Boussadjra Brahim, Nov 13 '20 at 23:52
@BoussadjraBrahim there is no debugging error, this is a technicality question to work with v-select. — clusterBuddy, Nov 13 '20 at 23:57

score 0 · Accepted Answer · answered Nov 14 '20 at 01:00

It doesn't look like vue-select supports <optgroup> yet. It's on the backlog (https://trello.com/c/XOH2ZO69), so support might be added in the future. There's a GitHub issue requesting the feature, and someone has posted a workaround there. Maybe this will work for you?

https://github.com/sagalbot/vue-select/issues/342#issuecomment-619356042

In case the link breaks in the future, here's the code from arggasasao:

<select @change="onChange($event, index)">
  <option selected>seleccionar</option>
  <slot v-for="(item, i) in topItems">
    <optgroup :key="i" v-if="item.sections" :label="item.name">
      <option v-for="(subItem, i) in item.sections.section" :key="i" :value="subItem.url">{{ sub.name }}</option>
    </optgroup>
    <option :key="i" v-if="!item.sections" :value="item.url"> {{ item.name }} </option>
  </slot>
</select>

how to display an array of objects where values are also an array

1 Answers1