Question

我是Vue.J的新手，并且构建了以下组件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://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}))$/,
    },
}

Vue.Js中的联系表

1 个答案: