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

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 }}而您可以将其转换为计算属性并使其更可重用。