Question

我正在用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' : ''"

但这没有帮助。

Answer 1

我设法做到了

[
    {
        "_id": 0,
        "count": 1
    },
    {
        "_id": 3,
        "count": 2
    },
    {
        "_id": 5,
        "count": 1
    }
]

但是，我只想在复选框下方显示一次成功消息“确定”和错误消息。我该怎么办？

加载页面时，v-复选框为true

1 个答案: