VeValidate 연결 메서드: 필드에 이름이 있는 경우 필드에 "name" 또는 "data-vv-name" 속성이 없습니다.

VeValidate 연결 메서드: 필드에 이름이 있는 경우 필드에 "name" 또는 "data-vv-name" 속성이 없습니다.

부모 컴포넌트가 개인 정보 컴포넌트를 렌더링하고 있으며 부모의 검증자 스코프를 삽입하고 있습니다.를 사용하면v-validate지시와this.$validator.validateAll()또는this.$validator.validate('field_name')이건 잘 작동한다.

단, 일부 필드를 개별적으로 검증해야 하지만this.$validator.attach('first_name', 'required')예를 들어 다음과 같은 경고를 받고 있습니다.[vee-validate] A field is missing a "name" or "data-vv-name" attribute에서 호출할 때 입력 요소가 완전히 렌더링되지 않은 경우에 대비하여 콜을 이동하여 확인자를 클릭 핸들러에 연결하려고 시도했습니다.mounted()그래도 같은 문제가 발생해요.나도 둘 다 먹어봤어name또는data-vv-nameAtribute를 참조해 주세요.

Parent.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');
    }

}

Personal Details.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 = '';

}

당신이 잘못 생각하고 있는 것 같아요.검증 로직은 부모가 아닌 자식 구성 요소 내에 있어야 합니다.그러나 여전히 부모를 사용하여 검증을 실행할 수 있습니다.부모로부터 검증자 인스턴스를 삽입할 때 자식 구성 요소를 다음과 같이 업데이트할 수 있어야 합니다.

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();또한 자 컴포넌트 내의 규칙에 따라 검증해야 합니다.

필요한 것(특정 분야 검증)을 실현하기 위해data-vv-validate-on사용자 지정 이벤트와 함께 속성을 지정합니다.이렇게 하면 버튼을 클릭했을 때 검증이 필요한 입력에 대해 이벤트를 실행할 수 있습니다.

상위 구성 요소가 다음으로 업데이트됨:

@Component({
    template: `
        <div class="container">
            <personal-details-component ref="personalDetails"></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 {
    $refs!: {
        personalDetails: PersonalDetailsComponent
    }

    handleButtonClick() {
        this.$refs.personalDetails.validateInput();
    }
}

Personal Details 컴포넌트:

@Component({
    template: `
    <div class="row">
        <div class="col-12">
            <form class="material-form">
                <div class="group w-third">
                    <input v-model="first_name" ref="firstName" type="text" name="first_name"
                    v-validate="'required'" 
                    data-vv-validate-on="validateStep" 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" ref="surname" type="text" name="surname" 
                    v-validate="'required'"
                    data-vv-validate-on="validateStep" 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" ref="email" type="text" name="email" 
                    data-vv-validate-on="validateStep" v-validate="'required|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;
    $refs!: {
        firstName: HTMLInputElement,
        surname: HTMLInputElement,
        email: HTMLInputElement
    }

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

    public validateInput() {
        this.$refs.firstName.dispatchEvent(new Event('validateStep'));
        this.$refs.surname.dispatchEvent(new Event('validateStep'));
        this.$refs.email.dispatchEvent(new Event('validateStep'));
    }
}

난 아직도 이해가 안 가attach방법은 동작하지 않지만, 이 대체 방법은 동작합니다.

저 같은 경우에는data-vv-name="someName"실종되었습니다.v-autocomplete 인스턴스에 대해 두 개의 유사한 컨트롤이 있는 경우 이름이 같은 필드가 서로 충돌하므로 이를 해결하기 위해 사용할 수 있습니다.data-vv-name="someName"다음은 예를 제시하겠습니다.

 <v-autocomplete
          v-model="id"
          :items="items"
          :label="$t('scheduling.fields.truck-id')"
          :placeholder="$t('common.words.none')"
          readonly
          :disabled="!canEdit"
          :append-icon="''">
 </v-autocomplete>`

 <v-autocomplete
          v-model="id2"
          :items="items2"
          :label="label2"
          :placeholder="$t('common.words.none')"
          readonly
          data-vv-name="someName"
          :disabled="!canEdit"
          :append-icon="''">
 </v-autocomplete>`

언급

언급URL : https://stackoverflow.com/questions/52968276/veevalidate-attach-method-a-field-is-missing-a-name-or-data-vv-name-attribu