Vue 2 목록에 새 항목 추가

Vue 2 목록에 새 항목 추가

아주 간단한 폼을 가지고 있는데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);
     }
   }
});

문제

문제는 목록에 여러 사용자를 추가하려고 하는 경우입니다.보시다시피 새 사용자의 새 값을 입력하면 최근에 추가된 사용자의 이전 값도 변경됩니다!

어떻게 하면 고칠 수 있죠?

푸시할 때this.user해당 데이터에 대한 참조를 푸시하는 어레이에 대해 설명합니다.대신 의 데이터를 사용하여 새 개체를 만듭니다.user오브젝트:

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

데이터와 분리해야 하는 새 개체를 만들어야 합니다.

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 }}대신 이 속성을 계산된 속성으로 변환하여 보다 재사용할 수 있습니다.

사용하시는 경우lodash이거 먹어봐.

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

언급URL : https://stackoverflow.com/questions/45181786/append-new-item-to-a-list-in-vue-2