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