在 vue 1.x 中选择 `optgroup`答案

【问题标题】：Select `optgroup` in vue 1.x在 vue 1.x 中选择 `optgroup`
【发布时间】：2016-07-07 21:10:47
【问题描述】：

在早期版本的vue.js 中，您可以使用optgroups 创建动态选择列表，例如this。

在较新版本的 vue 中，文档显示在选项中使用 v-for，并且似乎它们不再支持 optgroups。有解决办法吗？

【问题讨论】：

你不能使用嵌套的v-fors 吗？外部v-for 处理optgroups 和内部循环用options 填充它？

【解决方案1】：

使用optgroups 创建列表的最简单方法是嵌套v-for。对optgroup 使用外循环，对option 使用内循环。这是一个例子：

var app = new Vue({
  el: '#app',
  
  data: {
    selected: '',
    optgroups: [
      { label: 'A', options: ['a', 'b']},
      { label: 'B', options: ['c', 'd']}
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<div id="app">
  <select v-model="selected">
    <optgroup :label="group.label" v-for="group in optgroups">
      <option :value="option" v-for="option in group.options">{{ option }}</option>
    </optgroup>
  </select>
</div>

【讨论】：

@asemahle——这对filterBy有效吗？请看这个错误：jsfiddle.net/y106z528
语法为filterBy VALUE in PROPERTY。你的小提琴是filterBy VALUE in OBJECT。 Here is a fork of your fiddle 随着变化。您需要添加额外的逻辑来隐藏空的 optgroup。