Wie setze ich optgroup select label in Vue.js?

Question

Ich versuche, eine ausgewählte Gruppe in Vue zu machen.

Fiddle: https://jsfiddle.net/Tropicalista/vwjxc5dq/

ich das versucht habe:

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

Meine Daten:

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

Answer 1

Sie binden die label Attribut option, die ein Array ist. Was Sie wollen, ist die Bindung an den Schlüssel des Objekts.

Sie den Schlüssel jeder Option erhalten können durch einen zweiten Parameter in der v-for Richtlinie festgelegt wird:

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

---

ich auch Ihre options Eigenschaft optionGroups umbenennen würde weitere Verwirrung zu vermeiden:

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

Auf diese Weise macht die Vorlage mehr Sinn:

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