CODEWITHSUNDEEP
javascriptobjectcomponentsvue.js
KeironLowe
KeironLowe

Reputation: 731

Vue.js - Push to object without tracking

I've got an object called Attendees and another object called TempAttendee. A form is bound to TempAttendee and when the user submits that form, it takes TempAttendee and pushes it to Attendees.

The problem is that any further changes to the form will edit that attendee in the Attendees object due to the reactivity. How can I get around that? 

<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>

Upvotes: 0

Views: 141

Answers (1)

Marek Urbanowicz
Marek Urbanowicz

Reputation: 13664

Push copy and maybe clear temp.

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

Upvotes: 1

Related Questions