vue.js：v-model不能用v-for

Question

我已经开始使用vue了，所以这可能很容易......

这是我的情景：

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

}）;

我有类似的东西来生成HTML中的funcoes列表：

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

正如您所看到的，Dropbox正在从数据属性中填充（该部分运行良好）。现在，问题是select没有显示任何选中的内容。

我该如何解决这个问题？

感谢。

Answer 1

它应该是这样的。

v-model="f.secretaria.idSecretaria"

PS：您可能希望删除该secretaria键并展平对象，以使v-model="f.idSecretaria"可用。