在vue 1.x中选择`optgroup`

Question

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

在较新版本的vue中，文档在选项中显示为使用v-for，看起来他们不再支持optgroups。有没有解决方法？

Answer 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>