Vue.js - 追跡せずにオブジェクトにプッシュ

Question

AttendeesというオブジェクトとTempAttendeeというオブジェクトがあります。フォームはTempAttendeeにバインドされ、ユーザーがフォームを送信するとTempAttendeeが入力され、Attendeesにプッシュされます。

フォームにさらに変更を加えると、反応のためにAttendeesオブジェクト内のその出席者が編集されるという問題があります。どのように私はそれを回避することができますか？

<template> 
    <div> 
     <ul class="attendeeEditor"> 
      <li class="attendeeEditor__attendee" v-for="(attendee, index) in attendees"> 
       <span class="attendeeEditor__field">{{ attendee.email }}</span> 
      </li> 
      <li class="attendeeEditor__attendee attendeeEditor__form">    
       <input v-on:keydown.enter="addAttendee" class="attendeeEditor__field" placeholder="Email Address..." type="email" v-model="tempAttendee.email" required /> 
      </li> 
     </ul> 
    </div> 
</template> 

<script> 
    export default { 
     name: 'attendee-picker', 
     data: function() { 
      return { 
       attendees: {}, 
       tempAttendee: { 
        email: "" 
       } 
      } 
     }, 
     methods: { 
      addAttendee: function(event) { 
       this.attendees.push(this.tempAttendee); 
      } 
     } 
    } 
</script> 

Answer 1

プッシュコピーとおそらくテンポラリを消去します。

methods: { 
      addAttendee: function(event) { 
       this.attendees.push(Object.assign({}, this.tempAttendee)); 
       this.tempAttendee = { email: '' } 
      }