新しい項目をVue 2のリストに追加します

Question

私はユーザからnameとageを取得し、これをリストに追加する非常に単純な形式です。

JSFiddleで確認できます。私はリストに複数のユーザーを追加しようとしているところに問題がある

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

問題

：ここ

<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のコードです：ここで

はHTMLです。ご覧のとおり、新しいユーザーに新しい値を入力すると、最近追加されたユーザーの以前の値も変更されます。

どうすれば修正できますか？

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); 
    } 
    } 
}); 

もう1つお勧めします。私は{{ user.name +' '+ user.age }}と書くことによって名前と年齢の値を補間しているのに対し、代わりに計算されたプロパティに変換して再利用可能にすることができます。