vuejs2 - Vuejs在数组中的项目上使用v-model时，数据绑定(bind)不起作用

Question

Vue.js 的新手。不知道我哪里出错了。我有一个动态的用户列表，您可以将其添加到其中。我还有一个选择，我希望在对用户进行任何模型更改时保持最新状态。但是，当我更改用户信息时，选择不会被更新。我附上了代码和 fiddle 。

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<div id="app">
  <h1>Users</h1>
  <div v-for="user in users">
    User ID: <input type="text" v-model="user.id" /><br /> 
    First Name: <input type="text" v-model="user.firstName" /><br />
    Last Name: <input type="text" v-model="user.lastName" />
    <br />
  </div>
  <input type="button" value="Add User" v-on:click="addUser" />
  <br /><br />
  This select should stay synced with what is entered above<br />
  <select>
    <option v-for="user in users" v-bind:value="user.firstName">{{user.firstName}} {{user.lastName}}</option>
  </select>
</div>

JavaScript:

var app = new Vue({
    el: "#app",
    data: {
        users: [{}]
    },
    methods: {
        addUser: function() {
        this.users.push({});
      }
    }
});

fiddle : https://jsfiddle.net/rmekuuc3/

Answer 1

这是 change detection caveat在 Vue. Vue 无法检测到您何时将属性添加到该对象上尚不存在的对象。相反，您应该像这样编写代码。

var app = new Vue({
    el: "#app",
    data: {
      users: [{id: null, firstName: null, lastName: null}]
    },
    methods: {
      addUser: function() {
        this.users.push({id: null, firstName: null, lastName: null});
      }
    }
});

更新 fiddle .