在vue 1.x中选择`optgroup`

时间:2016-07-07 21:10:47

标签: javascript vue.js

vue.js的早期版本中,您可以使用optgroupsv-for创建动态选择列表。

在较新版本的vue中,文档会在选项中使用optgroups显示,并且看起来它们不再支持prefetch_related。有解决方法吗?

1 个答案:

答案 0 :(得分:4)

使用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>