javascript - Vuelidate 错误返回 true 但元素不呈现

Question

我有一个使用 vuelidate 验证字段的联系表单。问题是 - 验证有效，但错误不会呈现。$v.name.dirty 为 TRUE，$v.name.required 为 FALSE。记录 $v.name.dirty && !$v.name.required 返回 TRUE，这与 v-if 指令中的条件相同，但错误元素仍然不显示。

但是，当调用 .$touch() 并且 $v.name.dirty 变为 true 并且 $v.name.required 为 false 时，我在输入字段中键入的任何内容都会显示错误。

JS：

import translationsBus from "../../app/translations";
    export default {
        name: "contactForm",
        beforeMount() {
            this.$store.dispatch("updateTranslations", translationsBus.translations);
        },
        data: function () {
            return {
                name: '',
                email: '',
                subject: '',
                message: ' ',
                errors: [],
                isSuccessful: ''
            }
        },
        mounted() {

            var my_axios = axios.create({
                baseURL: '/'
            });
            Vue.prototype.$http = my_axios;
        },
        computed: {
            isLogged: function () {
                return isLoggedOn;
            },
            shouldShowSubjectOption: function () {
                return showSubjectOption;
            },
            translations: function () {
                return this.$store.state.translations.translations;
            },
        },
        methods: {
            onContactUsClick: function onContactUsClick() {
                const _this = this;
                this.$v.$touch();

                if (!this.$v.$error) {
                    let model = {
                        senderName: _this.name,
                        senderEmail: _this.email,
                        subject: _this.subject,
                        message: _this.message
                    };
                    this.$http.post('/home/contactus', model)
                        .then(response => {
                            console.log(response);
                            _this.isSuccessful = response.data;
                        })
                        .catch(e => {
                            console.log(e);
                        });
                }


            }
        },
        validations: {
            email: {
                required: required,
                isValidEmail: function isValidEmail(value) {
                    var re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
                    return re.test(value);
                }
            },
            name: {
                required: required
            },
            subject: {
                required: required
            },
            message: {
                required: required
            }
        }
    }```
HTML:

        <div v-bind:class="{ 'col-lg-6' : shouldShowSubjectOption, 'col-lg-12' : !shouldShowSubjectOption }">
            <div id="form-contact">
                <h1 class="lead">Get in touch...</h1>
                <form class="text-center" >
                    <div class="form-group">
                        <label for="name">{{translations['contact_Form_Name']}}</label>
                        <div class="input-group">
                            <span class="input-group-addon"><span class="fa fa-user"></span></span>
                            <input type="text" class="form-control" name="senderName" id="senderName" v-model:bind="name" v-bind:placeholder="translations['contact_Form_NamePlaceholder']" />

                        </div>
                        <div class="has-error" v-cloak>
                            <label class="control-label" v-if="$v.name.$dirty && !$v.name.required">{{translations['shared_Validation_ReuiredField']}}</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email">{{translations['contact_Form_EmailAddress']}}</label>
                        <div class="input-group">
                            <span class="input-group-addon"><span class="fa fa-envelope"></span></span>
                            <input type="email" class="form-control" name="senderEmail" id="senderEmail" v-model:bind="email" v-bind:placeholder="translations['contact_Form_EmailAddressPlaceholder']" />

                        </div>
                        <div class="has-error" v-cloak>
                            <label class="control-label" v-if="$v.email.$dirty && !$v.email.required">{{translations['shared_Validation_ReuiredField']}}</label>
                            <label class="control-label" v-if="$v.email.$dirty && $v.email.required && !$v.email.isValidEmail">{{translations['contact_Form_EmailAddressValidationMessage']}}</label>

                        </div>
                    </div>
                    <div class="form-group" v-if="shouldShowSubjectOption">
                        <label for="subject">{{translations['contact_Form_Subject']}}</label>
                        <select id="subject" name="subject" class="form-control" v-model:bind="subject" v-bind:title="translations['contact_Form_SubjectPickerText']">
                            <option value="service">1</option>{{translations['contact_Form_SubjectOption_GCS']}}
                            <option value="suggestions">2</option>{{translations['contact_Form_SubjectOption_Suggestions']}}
                            <option value="product">3</option>{{translations['contact_Form_SubjectOption_ProductSupport']}}
                        </select>

                    </div>
                    <div class="has-error" v-cloak>
                        <label class="control-label" v-if="$v.subject.$dirty && !$v.subject.required" v-cloak>{{translations['shared_Validation_ReuiredField']}}</label>
                    </div>
                    <div class="form-group">
                        <label for="name">{{translations['contact_Form_Message']}}</label>
                        <textarea name="message" id="message" class="form-control" v-model:bind="message" rows="9" cols="25"
                                  placeholder="">{{translations['contact_Form_Message']}}</textarea>

                    </div>
                    <div class="has-error" v-cloak>
                        <label class="control-label" v-if="$v.message.$dirty && !$v.message.required">{{translations['shared_Validation_ReuiredField']}}</label>
                    </div>

                    <div class="form-group" v-if="isLogged">
                        <div class="g-recaptcha" data-sitekey=""></div>
                    </div>
                    <button type="button" class="btn btn-primary btn-block" v-on:click="onContactUsClick" id="btnContactUs">{{translations['contact_Form_SendMessageButton']}}</button>
                </form>
            </div>
        </div>

    </div>
</div>

I expect error elements to appear on submit.