清除/重置javascript / vue.js中的对象值

Question

我使用Vue管理表单来添加访客，每个访客都是一个对象。 Form绑定到newGuest，然后在addGuest函数中使用。

在此之后，我需要清除/重置newGuest对象和嵌套对象。当前的解决方案可能不是最好的，因为如果它发生变化，我需要在两个地方编辑newGuest。

实现这一目标的最佳方法是什么？我应该对属性进行循环还是有更简单的方法？

＆＃13;

＆＃13;

   new Vue({
        el: '#app',
        data: {
            newGuest: {
                name: '',
                contacts: {
                    email: '',
                    phone: ''
                },
                inviteSent: false,
                RSVP: 1,
            },
            guestList: [
                {
                    name: 'Test name',
                    contacts: {
                        email: 'test@gmail.com',
                        phone: 38099212112
                    },
                    inviteSent: true,
                    RSVP: 1,
                }
            ]
        },
        methods: {
            addGuest () {
                this.guestList.push(this.newGuest);
                this.newGuest = {
                name: '',
                contacts: {
                    email: '',
                    phone: ''
                  },
                inviteSent: false,
                RSVP: 1
                }
            },
        }

    })

＆＃13;

.guest-form__section {
   display: inline-block; 
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<div id="app">
 <form @submit.prevent="addGuest" class="guest-form">
        <div class="guest-form__section"><input type="text" v-model="newGuest.name" placeholder="name"></div>
        <div
                class="guest-form__section"><input type="email" v-model="newGuest.contacts.email" placeholder="email"></div>
        <div class="guest-form__section"><input type="tel" v-model="newGuest.contacts.phone" placeholder="phone"></div>
        <div class="guest-form__section"><input type="checkbox" v-model="newGuest.inviteSent"></div>
        <div class="guest-form__section"><select v-model="newGuest.RSVP">
            <option value="1">No answer</option>
            <option value="0">Declined</option>
            <option value="2">Accepted</option>
        </select>
        </div>
        <input type="submit">
    </form>
    
    
     <pre>{{$data}}</pre>
     
     </div>

＆＃13;

＆＃13;

＆＃13;