Vue.js - Push на объект без отслеживания

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: '' } 
      }