在vue.js
的早期版本中,您可以使用optgroups
等v-for
创建动态选择列表。
在较新版本的vue中,文档会在选项中使用optgroups
显示,并且看起来它们不再支持prefetch_related
。有解决方法吗?
答案 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>