如何在Vue.js中設置optgroup選擇標籤？

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

你要綁定的label屬性option這是一個數組。你想要綁定到對象的鍵。

您可以通過在v-for指令指定第二個參數，獲取每個選項的關鍵：

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

---

我也想你options屬性重命名爲optionGroups以避免進一步的混亂：

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>