我正在 vuelidate 中进行表单验证。我有一组复选框。表格中还有其他字段。我只想在选中复选框时显示复选框的成功消息。但是即使未选中复选框，页面加载时也会显示成功消息。我的代码有什么问题。这是我的代码：
<template>
<v-dialog persistent max-width="75%" v-model="dialog">
<v-btn round color="secondary" slot="activator">New Enquiry</v-btn>
<v-card>
<v-card-text>
<v-form ref="enquiryForm">
<v-container fluid grid-list-lg>
<v-layout row wrap>
<v-flex xs6>
<span class="title">Prefrences</span>
<v-layout row wrap>
<v-flex xs6>
<v-checkbox
v-for="( value, index ) in preferencesData"
:key="index"
v-model="enquiryForm.preferences"
:label="value"
:value="index"
required
:success="!!enquiryForm.preferences"
:success-messages="(!!enquiryForm.preferences) ? 'Ok' : ''"
:error-messages="fieldErrors('enquiryForm.preferences')"
@change="$v.enquiryForm.preferences.$touch()"
@blur="$v.enquiryForm.preferences.$touch()"
></v-checkbox>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-container>
</v-form>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn flat lg color="secondary" @click="close">Cancel</v-btn>
<v-btn flat lg color="secondary" @click="submit">Submit</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<script>
import { mapGetters } from 'vuex';
import validationMixin from '@/mixins/validationMixin';
import { required } from 'vuelidate/lib/validators'
import moment from 'moment';
const defaultFormData = {
date: moment().format(),
preferences: []
}
export default {
mixins: [ validationMixin ],
validations: {
enquiryForm: {
preferences: { required }
}
},
validationMessages: {
enquiryForm: {
preferences: {
required: 'Please select at least one.'
}
}
},
data ( ) {
return {
dialog: false,
enquiryForm: Object.assign({}, defaultFormData),
preferencesData: [
'Furnished',
'SemiFurnished',
'UnFurnished'
]
}
},
computed: {
...mapGetters({
projects: 'projects',
cpexecutives: 'cpexecutives'
})
},
mounted ( ) {
this.$store.dispatch('fetchProjects');
this.$store.dispatch('getUsers');
this.clearForm();
},
methods: {
clearForm ( ) {
this.$v.$reset();
this.enquiryForm = Object.assign({}, defaultFormData);
},
submit ( ) {
this.$v.$touch()
this.$store.dispatch('addEnquiry', {
date: moment().format(),
preferences: this.enquiryForm.preferences
})
.then( ( result ) => {
this.close();
} )
.catch( ( err ) => {
console.log( err );
} )
},
close ( ) {
this.clearForm();
this.dialog = false;
}
}
}
</script>
我试过了：
:success="!!enquiryForm.preferences && !$invalid"
:success-messages="(!!enquiryForm.preferences && !$invalid) ? 'Ok' : ''"
和
:success="!!enquiryForm.preferences && !$v.$invalid"
:success-messages="(!!enquiryForm.preferences && !$v.$invalid) ? 'Ok' : ''"
但这并没有帮助。