vue.js: v-Modell nicht für ausgewählte Arbeiten mit v-for

Question

Ich habe begonnen, vue verwenden, so könnte dies einfach sein ...

Hier ist mein Szenario:

var app = new Vue({ 
     el: "#app", 
     data: { 
      utilizador:{ 
       nome:"Luis Abreu", 
       funcoes:[ 
       { 
       secretaria: {idSecretaria:2,nome:"YYY"} 
       } 
      ]}), 
      secretarias: [{idSecretaria:1,nome:"XXX"},{idSecretaria:2,nome:"YYY"},{idSecretaria:3,nome:"Tests 2"}] 
     } 

}) ;

Und ich habe so etwas wie dies für die Liste des funcoes in der HTML-Generierung:

<tr v-for="(f, pos) in utilizador.funcoes"> 
<td> 
    <select class="form-control" v-model="f.idSecretaria"> 
    <option v-for="s in secretarias" :value="s.idSecretaria"> 
    {{s.nome}} 
    </option> 
    </select> 
</td> 
</tr> 

Wie Sie sehen können, ist die Dropbox aus einer Dateneigenschaft gefüllt wird (und das Teil gut funktioniert). Nun, das Problem ist, dass die Auswahl nichts ausgewählt zeigt.

Wie kann ich das lösen?

Danke.

Answer 1

Es sollte eigentlich so sein.

v-model="f.secretaria.idSecretaria" 

PS: Sie könnten, dass secretaria Schlüssel entfernen möchten, und glätten Sie das Objekt, um v-model="f.idSecretaria" nutzbar zu machen.