vue.js - 如何显示值也是数组的对象数组

Question

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

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

期待：

• 无法选择标签，只能选择项目
• 选择时发回 {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

万一将来链接中断，这里是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>