Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

我做错了什么？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

或者，您可以这样做：

＆＃13;

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

＆＃13;

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

＆＃13;

Vue v-model在使用v-for

1 个答案: