Question

我有一个非常简单的表单，它从用户那里获取name和age并将其添加到列表中。

您可以在JSFiddle上查看。

这是HTML：

<div id="app">
<ul>
  <li v-for="user in users">{{ user.name +' '+ user.age }}</li>
</ul>
<hr>
  <form v-on:submit.prevent="addNewUser">
    <input v-model="user.name" />
    <input v-model="user.age" />
    <button type="submit">Add User</button>
  </form>
</div>

这是Vue代码：

new Vue({
   el: '#app',
   data: {
    users: [{name:"Mack", age:20}],
    user: {name:"", age:0}
   },
   methods: {
     addNewUser() {
        this.users.push(this.user);
     }
   }
});

问题

问题在于我尝试将多个用户添加到列表中。如您所见，当我为新用户键入新值时，最近添加的用户的先前值也会更改！

我该如何解决？

Answer 1

当您将this.user推送到数组时，您正在推送对该数据的引用。而是使用user对象中的数据创建一个新对象：

this.users.push({ name: this.user.name, age: this.user.age })

Answer 2

您应该创建一个应该与数据分离的新对象。

new Vue({
   el: '#app',
   data: {
    users: [{name:"Mack", age:20}],
    user: {name:"", age:0}
   },
   methods: {
     addNewUser() {
        let newUser = {
           name: this.user.name,
           age: this.user.age
        };

        this.users.push(newUser);
     }
   }
});

我建议的另一件事;我看到您通过编写{{ user.name +' '+ user.age }}来插入名称和年龄的值，而您可以将其转换为计算属性并使其更具可重用性。

Answer 3

如果您正在使用lodash，请尝试此操作。

this.users.push(_.cloneDeep(this.user))

将新项目附加到Vue 2中的列表

3 个答案: