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>