首页 > 解决方案 > vuelidate:即使不需要元素,提交按钮也会被禁用

问题描述

我正在做表单验证。这是我的代码:

<v-menu ref="menu3" :close-on-content-click="false" v-model="anniversaryVisibility" :nudge-right="10" :return-value.sync="enquiryForm.anniversary"
   lazy
   transition="scale-transition"
   offset-y
   full-width
   min-width="290px">

   <v-text-field 
        slot="activator" 
        v-model="enquiryForm.anniversary" 
        label="Anniversary" 
        append-icon="event" 
        outline 
        readonly
        :error-messages="fieldErrors('enquiryForm.anniversary')"
        @input="$v.enquiryForm.anniversary.$touch()"
        @blur="$v.enquiryForm.anniversary.$touch()"
        ></v-text-field>

        <v-date-picker v-model="enquiryForm.anniversary" @input="$refs.menu3.save(enquiryForm.anniversary)"></v-date-picker>
 </v-menu>

这是我的提交按钮:

<v-btn flat lg color="secondary" @click="submit" :disabled="$v.$invalid">Submit</v-btn>

这是我的脚本:

const defaultFormData = {
anniversary: ''
}

validations: {
    enquiryForm: {
        anniversary: { }
    }
}

我的表格中不需要周年日期。然而,我必须选择周年纪念日才能启用提交按钮。在选择周年日期之前,提交按钮将保持禁用状态。任何人有任何想法提交表格。

这是我的提交代码:

submit ( ) {
        this.$store.dispatch('addEnquiry', {
            date: moment().format(),
            customername: this.enquiryForm.customername,
            contactnumber: this.enquiryForm.contactnumber,
            alternatecontactnumber: this.enquiryForm.alternatecontactnumber,
            emailid: this.enquiryForm.emailid,
            address: this.enquiryForm.address,
            dateofbirth: this.enquiryForm.dateofbirth,
            anniversary: this.enquiryForm.anniversary,
            requirement: this.enquiryForm.requirement,
            preferences: this.enquiryForm.preferences,
            informationSource: this.enquiryForm.informationSource,
            investmentRange: this.enquiryForm.investmentRange,
            preferredBank: this.enquiryForm.preferredBank,
            loan: this.enquiryForm.loan,
            owncontribution: this.enquiryForm.owncontribution,
            sourceofinformation:this.enquiryForm.sourceofinformation,
            projectId: this.enquiryForm.projectId,
            company: this.enquiryForm.company,
            designation: this.enquiryForm.designation,
            executiveId: this.enquiryForm.executiveId
        })
        .then( ( result ) => {
            this.close();
        } )
        .catch( ( err ) => {
            console.log( err );
        } )
    }

标签: vuetify.jsvuelidate

解决方案


推荐阅读