Vue.Js 中的聯系表單

Question

我是 Vue.Js 的新手，並且已經構建了以下組件ContactForm.vue 。 它是App.vue中唯一調用的組件。

<template>
<div class="contactForm">
  <form class="form" @submit.prevent="submit">
    <input required name="first_name" id ="first_name" v-model='contact.first_name' placeholder="First name" type="text" autocomplete="on">
    <input required name="last_name" id ="last_name" v-model='contact.last_name' placeholder="Last name" type="text" autocomplete="on">
    <input required :class="['input-group', isEmailValid()]" name="email" id ="email" v-model="contact.email" placeholder="E-mail" type="email" autocomplete="on">
    <input name="phone" id ="phone" v-model='contact.phone' placeholder="Phone" type="text" autocomplete="on">
    <v-select placeholder="Reason" name="subjects" class="subject_selection" multiple :options="contact.options"></v-select>
    <textarea name="message" id ="message" v-model="contact.message" rows="4" placeholder="Message"></textarea>
    <div class='captcha-input'>
            <vue-recaptcha
            ref="recaptcha"
            @verify="onCaptchaVerified"
            @expired="onCaptchaExpired"
            size="invisible"
            sitekey="<KEY>">
            </vue-recaptcha>
    </div>
    <button class="button">Send</button>
</form>

<script>
import Vue from 'vue'
import vSelect from 'vue-select'
import VueRecaptcha from 'vue-recaptcha';

export default {
name: 'ContactForm',

components: {
    'vue-recaptcha': VueRecaptcha,
    'v-select': vSelect
},

 data: {
    contact: {

        first_name: '',
        last_name: '',
        email: '',
        phone: '',
        message: '',
        options: ['Sell','Become a student','Become a teacher', 'General enquiry'],
        reg: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,24}))$/,
    },

    isSending: false
},
methods: {

    isEmailValid: function() {
        return (this.contact.email == "")? "" : (this.contact.reg.test(this.email)) ? 'has-success' : 'has-error';
    },

    submit: function () {
    // this.status = "submitting";

        // Verify email

        // Verify phone

        this.$refs.recaptcha.execute();
    },
    onCaptchaVerified: function (recaptchaToken) {
        const self = this;
        self.status = "submitting";
        self.$refs.recaptcha.reset();

        this.isSending = true;

        setTimeout(() => {
            // Build for data
            let form = new FormData();
            for (let field in this.contact) {
                form.append(field, this.contact[field]);
            }

            // Send form to server  
            axios.post("https://api.airstudy.com.au/contacts/", form).then((response) => {
                console.log(response);
                this.clearForm();
                this.isSending = false;
            }).catch((e) => {
                console.log(e)
            });

        }, 1000);

    },
    onCaptchaExpired: function () {
        this.$refs.recaptcha.reset();
    },

    /**
    * Clear the form
    */  
    clearForm() {
        for (let field in this.contact) {
            this.contact[field] = ''
        }
    },
}
}
</script>

這會產生以下錯誤：

據我了解，我認為該錯誤可能與如何通過export default在每個組件中保存/寫入數據有關。

我對組件的理解是data可以保存在每個組件中。 但是我不確定為什么會收到undefined的錯誤。

任何幫助都會很棒，謝謝！

Answer 1

您的錯誤是不言自明的 - 在 vue 組件中，數據選項應該是一個函數：

組件的 data 選項必須是一個函數，以便每個實例都可以維護返回的數據對象的獨立副本：

https://v2.vuejs.org/v2/guide/components.html#data-Must-Be-a-Function 。

所以讓我們修復它。

從：

data: {
    contact: {

        first_name: '',
        last_name: '',
        email: '',
        phone: '',
        message: '',
        options: ['Sell','Become a student','Become a teacher', 'General enquiry'],
        reg: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,24}))$/,
    },

    isSending: false
},

至：

data(){
 return {
    contact: {

        first_name: '',
        last_name: '',
        email: '',
        phone: '',
        message: '',
        options: ['Sell','Become a student','Become a teacher', 'General enquiry'],
        reg: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,24}))$/,
    },
}