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