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>