将新项目附加到 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);
     }
   }
});

问题

问题是我试图将多个用户添加到列表中。如您所见，当我为新用户键入新值时，最近添加的用户的先前值也会发生变化！

我该如何解决？

原文由 Hamed Kamrava 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 Daniel D 发布，翻译遵循 CC BY-SA 3.0 许可协议

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 }} 来插入名称和年龄的值，而您可以将其转换为计算属性并使其更易于重用。

原文由 wegelagerer 发布，翻译遵循 CC BY-SA 3.0 许可协议