追加新的項目到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對象中的數據的新對象：如果您使用lodash

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

Answer 2

，試試這個。

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

Answer 3

您應該創建一個新的對象，該對象應與數據分離。

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 }}來插入名稱和年齡的值，而您可以將其轉換爲計算屬性並使其更具可重用性。