Vue v-model 在使用 v-for 时不更新数组值

Question

我是 Vue 的新手，正在v-model尝试看看我能创造什么。我想制作一个可编辑的名称数组。到目前为止，这是我的代码：

var app = new Vue({
  el: '#app',
  data: {
    names: ['Josh', 'Tom']
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>

<div id="app">
  Editable list:
  <ul>
    <li v-for="name in names"><input type="text" v-model="name"></li>
  </ul>
  {{ names }}
</div>

运行时，输入显示，每个输入都包含正确的值。但是，输入输入并不会names像我预期的那样更新数组。

我究竟做错了什么？

Answer 1

您正在尝试使用v-model对值进行操作，而您需要对 vue 数据字段进行操作。例如，尝试以下操作：

var app = new Vue({
  el: '#app',
  data: {
    people: [{name: 'Josh'}, {name: 'Tom'}]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>

<div id="app">
  Editable list:
  <ul>
    <li v-for="person in people"><input type="text" v-model="person.name"></li>
  </ul>
  {{ people }}
</div>

或者，你可以这样做：

var app = new Vue({
  el: '#app',
  data: {
    names: ['Josh', 'Tom']
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>

<div id="app">
  Editable list:
  <ul>
    <li v-for="(name, index) in names"><input type="text" v-model="names[index]"></li>
  </ul>
  {{ names }}
</div>