typescript - VeeValidate 附加方法 : A field is missing a "name" or "data-vv-name" attribute when fields do have name

Question

我有一个呈现个人详细信息组件的父组件，并且正在注入(inject)父组件的验证器范围。如果我使用 v-validate 指令和 this.$validator.validateAll() 或 this.$validator.validate('field_name')这很好用。

但是，我需要独立验证一些字段，但是当使用 this.$validator.attach('first_name', 'required') 时，例如我收到以下警告 [ vee-validate] 字段缺少“名称”或“data-vv-name”属性。我已经尝试将调用移动到点击处理程序中以附加验证器，以防输入元素在从 mounted() 调用时未完全呈现但仍然遇到相同的问题。我还分别尝试了 name 或 data-vv-name 属性。

父类.ts

import { Vue, Component } from 'vue-property-decorator';

import PersonalDetailsComponent from './PersonalDetails';

@Component({
    template: `
        <div class="container">
            <personal-details-component></personal-details-component>

            <div class="row">
                    <Button :onClick="handleButtonClick" :buttonText="'Validate'"></Button>
            </div>
        </div>
    `,
    components: {
        PersonalDetailsComponent,
    },
    $_veeValidate: {validator: 'new'}
})
export default class ClaimComponent extends Vue {

    mounted() {
        this.attachValidators();
    }

    handleButtonClick() {
        this.$validator.validateAll();
    }

    attachValidators() {
        console.log(document.getElementsByName('first_name')); // Finds the element

        this.$validator.attach('first_name', 'required');
        this.$validator.attach('surname', 'required');
        this.$validator.attach('email', 'required');
    }

}

PersonalDetails.ts

import {Vue, Component, Inject} from 'vue-property-decorator';

import {Validator} from 'vee-validate';

@Component({
    template: `
    <div class="row">
        <div class="col-12">
            <form class="material-form">
                <div class="group w-third">
                    <input v-model="first_name" type="text" name="first_name" required>
                    <span class="highlight"></span>
                    <span class="bar"></span>
                    <label>First name</label>
                    <span class="form-text error-text">{{ errors.first('first_name') }}</span>
                </div>
                <div class="group w-third">
                    <input v-model="surname" type="text" name="surname" required>
                    <span class="highlight"></span>
                    <span class="bar"></span>
                    <label>Surname</label>
                    <span class="form-text error-text">{{ errors.first('surname') }}</span>
                </div>
                <div class="group w-third">
                    <input v-model="email" type="text" name="email" required>
                    <span class="highlight"></span>
                    <span class="bar"></span>
                    <label>Email address</label>
                    <span class="form-text error-text">{{ errors.first('email') }}</span>
                </div>
            </form>
        </div>
    </div>
    `
})
export default class PersonalDetailsComponent extends Vue {
    @Inject('$validator') public $validator!: Validator;

    first_name: string = '';
    surname: string = '';
    email: string = '';

}

Answer 1

我想你可能想错了。理想情况下，验证逻辑应该在子组件中，而不是在父组件中。但是您应该仍然能够使用父级来运行验证。当您从父级注入(inject)验证器实例时，您应该能够将子组件更新为以下内容:

export default class PersonalDetailsComponent extends Vue {
    @Inject('$validator') public $validator!: Validator;

    first_name: string = '';
    surname: string = '';
    email: string = '';

    public mounted() {
        this.$validator.attach('first_name', 'required');
        this.$validator.attach('surname', 'required');
        this.$validator.attach('email', 'required');
    }
}

然后您可以从父级中删除 attachValidators 方法。这应该将这些验证规则附加到父级提供的验证器实例。所以理论上父组件可以运行 this.$validator.validateAll(); 并且它应该根据子组件内的规则进行验证。