如何显示值也是数组的对象数组

Question

我正在使用 vue-select，我希望像这样显示我的 select 框：

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

期待：

标签不能select编辑，只有项目可以select编辑
在 selection 上发送回 {label:value}（字符串）

我的 JSON 构建如下：

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

这正是要求的格式，但出于某种原因我没有正确使用他们的道具之一。如果您已经遇到这个问题，将不胜感激。谢谢。

Answer 1

看起来 vue-select 还不支持 <optgroup>。它在积压 (https://trello.com/c/XOH2ZO69) 中，因此将来可能会添加支持。请求此功能时出现 GitHub 问题，有人已在此处发布了解决方法。也许这对你有用？

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

以防 link 将来中断，这里是来自 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

vue.js

vue-select