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

Posted 2023-02-22

【中文标题】将新项目附加到 Vue 2 中的列表

【英文标题】：Append new Item to a list in Vue 2

【发布时间】：2017-12-24 04:58:36

【问题描述】：

我有一个非常简单的表单，它从用户那里获取 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);
     
   
);

问题

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

我该如何解决？

【参考方案1】：

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

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

【参考方案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 来插入姓名和年龄的值，而您可以将其转换为计算属性并使其更可重用。

【参考方案3】：

如果你使用lodash，试试这个。

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