Vue.js - ve-validate를 사용하기 위해 v-를 사용하여 사용자 지정 단일 파일 구성 요소를 제대로 검증할 수 없음

Vue.js - ve-validate를 사용하기 위해 v-를 사용하여 사용자 지정 단일 파일 구성 요소를 제대로 검증할 수 없음

vue 앱을 만들고 있으며 현재 "개인" 개체가 있는 구성 요소와 이름, 주소, 이메일 등 해당 사용자에 대한 정보를 추가하기 위한 몇 가지 입력 필드를 구축하고 있습니다.이러한 필드 중 하나가 휴대폰 번호이지만, 한 사람이 여러 번호를 가질 수 있기 때문에 원하는 대로 입력 필드를 반복하는 커스텀 컴포넌트를 만들었습니다.대충 이런 느낌이에요.이러한 입력은 모두 vee validate를 사용하여 검증되고 있습니다.대략 다음과 같습니다.

     <!--createPerson.vue -->
     <div class="form-group">
        <input v-model="person.firstName" v-validate="'required'" data-vv-delay="500" name="first-name" type="text" placeholder="First name">
        <span v-show="errors.has('first-name')" class="input__error">{{ errors.first('first-name') }}</span>
    </div>

    <div class="form-group">
        <input v-model="person.lastName" v-validate="'required'" data-vv-delay="500" name="last-name" type="text" placeholder="Last name">
        <span v-show="errors.has('last-name')" class="input__error">{{ errors.first('last-name') }}</span>
    </div>

    <repeatable-inputs v-model="person.mobiles"  v-validate="'required'" data-vv-value-path="input" data-vv-name="mobile" type="tel" name="mobile" placeholder="Mobile" :inputmode="numeric" link-name="mobile number"></repeatable-inputs>

    <div class="form-group">
        <input v-model="person.email"  v-validate="'required|email'" data-vv-delay="500" name='email' type="text" placeholder="Personal email">
        <span v-show="errors.has('email')" class="input__error">{{ errors.first('email') }}</span>
    </div>

같은 createPerson 아래에 있는 person 객체.vue 파일에는 빈 어레이로 시작하는 모바일이라는 속성이 있습니다.또한 vee-validate docs에서 설명한 바와 같이 validateAll() 함수도 있습니다.이 함수는 "Next" 버튼을 클릭했을 때 모든 입력의 검증을 수행합니다.그리고 반복할 수 있습니다.Inputs.vue는 다음과 같습니다.

<template>
    <div>
        <div class="form-group" v-for="(input, index) in inputs">
            <input
                :type="type"
                :name="name+index"
                :placeholder="placeholder"
                :inputmode="inputmode"
                :value="input"
                @input="update(index, $event)"
                v-focus></input>

        </div>

        <a href="#" v-on:click.prevent="add">Add another {{linkName}}</a>


    </div>
    </template>

    <script>
        export default {
            props: {
                value: {
                    type: Array,
                    default: ['']
                },
                type: {
                    type:       String,
                    default:    "text"
                },

                name:           String,
                placeholder:    String,
                inputmode:      String,

                linkName: {
                    type:       String,
                    default:    "input"
                }
            },

            data: function () {
                return {
                    inputs: this.value
                }
            },
            methods: {
                add: function () {
                    this.inputs.push('');
                },

                update: function(index, e) {
                    this.inputs[index] = e.target.value;
                    this.$emit('input', this.inputs);
                }
            }
        }
    </script>

부모 createPerson에서 이러한 커스텀 입력의 유효성을 확인할 수 있다.vue는 validateAll() 함수를 사용하여 다음과 같이 기술합니다.Should have a data-vv-value-path attribute which denotes how to access the value from within that component (Needed for validateAll calls).

그리고 여기가 내가 갇힌 곳이야.vv-path가 반드시 가리켜야 하는지는 잘 모르겠고, '값', '입력', '입력', 워치 기능 생성 및 기타 의미 없는 몇 가지를 사용해 보았습니다.v-for를 사용한 커스텀 입력의 유효성을 확인하는 git의 문제를 발견했지만, 그 이후 수정되었다고 합니다.

data-v-v-value-path는 데이터가 구성 요소 상태 내에 있는 위치를 가리켜야 합니다.입력 시 v-model 특성을 사용하여 입력 컨텐츠를 데이터에 바인딩하면 검증자가 검증해야 하는 하위 구성 요소의 속성을 알 수 있습니다.

따라서 data-v-v-value-path는 하위 구성 요소 내부의 데이터를 가리키며 v-model에 바인딩되면 데이터가 자동으로 업데이트됩니다.

언급URL : https://stackoverflow.com/questions/45333410/vue-js-cant-properly-validate-a-custom-single-file-component-with-v-for-using