Vue.jsにoptgroup select labelを設定するには？

Question

私はVueで選択グループを作ろうとしています。

フィドル：私はこれを試してみたhttps://jsfiddle.net/Tropicalista/vwjxc5dq/

：

<optgroup v-for="option in options" v-bind:label="option"> 
    <option v-for="sub in option" v-bind:value="option.value"> 
    {{ sub.text }} 
    </option> 
</optgroup> 

マイデータ：

data: { 
    selected: 'A', 
    options: { 
    First: [ 
     { text: 'One', value: 'A' }, 
     { text: 'Two', value: 'B' } 
    ], 
    Second: [ 
    { text: 'Three', value: 'C' } 
    ] 
    } 
} 

Answer 1

あなたは配列ですoptionからlabel属性を結合しています。あなたの望むものはオブジェクトのキーにバインドすることです。あなたはv-forディレクティブで二番目のパラメータを指定することで、各オプションのキーを取得することができます

：

<optgroup v-for="(option, key) in options" v-bind:label="key"> 

---

私はさらに混乱を避けるために、optionGroupsにごoptionsプロパティの名前を変更したい：

data: { 
    selected: 'A', 
    optionGroups: { 
    First: [ 
     { text: 'One', value: 'A' }, 
     { text: 'Two', value: 'B' } 
    ], 
    Second: [ 
     { text: 'Three', value: 'C' } 
    ] 
    } 
} 

このようにして、テンプレートが理にかなっています：

<optgroup v-for="(group, name) in optionGroups" :label="name"> 
    <option v-for="option in group" :value="option.value"> 
    {{ option.text }} 
    </option> 
</optgroup>