CODEWITHSUNDEEP
bindingvue.js
Luis Abreu
Luis Abreu

Reputation: 4506

vue.js: v-model not working for select with v-for

I have started using vue, so this might be really easy...

Here's my scenario:

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"}]
        }

});

And I have something like this for generating the list of funcoes in the HTML:

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

As you can see, the dropbox is being filled from a data property (and that part is working well). Now, the problem is that the select does not show anything selected.

How can I solve this?

Thanks.

Upvotes: 0

Views: 1621

Answers (1)

Ikbel
Ikbel

Reputation: 7851

It should actually be like this.

v-model="f.secretaria.idSecretaria"

PS: You might want to remove that secretaria key and flatten the object in order to make v-model="f.idSecretaria" usable.

Upvotes: 1

Related Questions