vee-validate와 함께 작동하도록 커스텀 입력 컴포넌트를 수정하는 방법

vee-validate와 함께 작동하도록 커스텀 입력 컴포넌트를 수정하는 방법

Vue 프로젝트에서 입력 컴포넌트를 생성하여 폼 내에서 이 컴포넌트를 사용하고 있습니다.vee-validate를 사용하여 입력을 검증하고 싶습니다.

먼저 일반 입력과 마찬가지로 컴포넌트를 검증하려고 했지만 오류 메시지를 표시하고 Vue Devtools를 확인하지 못한 후 입력 컴포넌트에 오류가 적용된다는 것을 알게 되었습니다.(단, 루트부터 입력 컴포넌트 자체까지 모든 컴포넌트가 액세스할 수 있는 "fields"와 "fields"라는 두 가지 계산 속성이 있습니다.)

그런 다음 vee-validate docs를 체크하고 Validation Provider와 Validation Observer를 사용하려고 했습니다.이 두 가지 부품은 너무 헷갈려서 이 중간 기사를 봐도 사용법을 알 수 없었습니다.이 컴포넌트가 스코프 슬롯을 어떻게 사용하고 있는지 모르겠습니다.

부모 입력 컴포넌트의 유효성을 확인하고 폼 위의 부모에 오류 메시지를 표시할 수 있도록 하고 싶습니다.(검증 옵서버 및/또는 검증 프로바이더의 유무에 관계없이).어떤 접근법이라도 감사합니다.

입력 컴포넌트는 다음과 같습니다.

<template>
  <div class="info-input-control">
    <div class="info-input-icon">
      <slot name="icon"><span uk-icon="icon: pencil; ratio: 1.4"></span></slot>
    </div>

    <input :id="id" :type="type" :value="value" :name="name"
           v-validate="validations || ''"
           @keyup.enter="$emit('enter')"
           @focus="isActive = true"
           @blur="isActive = value.length > 0"
           @input="$emit('input', $event.target.value)" :key="name">
    <label :for="id" :class="{'info-input-label': true, 'is-active': isActive}">{{label}}</label>

  </div>
</template>

<script>
    export default {
        name: 'InfoTextInput',
        props: {
            id: String,
            label: String,
            ltr: Boolean,
            name: {
                type: String,
                required: true
            },
            type: {
                type: String,
                required: true,
                validator: function (value) {
                    return ['text', 'password', 'email'].indexOf(value) !== -1
                }
            },
            validations: Object,
            value: String
        },
        data() {
            return {
                isActive: false
            }
        },
        mounted() {
            this.isActive = this.value.length > 0
        }
    }
</script>

입력 컴포넌트가 하나뿐인 최소한의 폼 버전입니다.

<form action="#" @submit.prevent="userLogin">
    <div class="uk-text-danger">
        <span>Errors: </span>
        <span>{{errors.first('mobile')}}</span>
    </div>

    <div class="uk-flex uk-flex-center">
        <div class="uk-width-medium">
            <info-text-input type="text" id="user-login-phone" label="Mobile" name="mobile" ltr v-model="login.mobile" :validations="mobileValidations" key="login-mobile">
                <template v-slot:icon>
                    <span uk-icon="icon: phone; ratio: 1.4"></span>
                </template>
            </info-text-input>
        </div>
    </div>
</form>

추신: Validation Observer와 Validation Provider를 글로벌하게 등록했습니다.

다음 예를 따라보세요.

<template>
  <div class="info-input-control">
    <div class="info-input-icon">
      <slot name="icon"><span uk-icon="icon: pencil; ratio: 1.4"></span></slot>
    </div>

    <input :id="id" :type="type" :name="name"
           v-model="localValue"
           v-validate="validations || ''"
           @keyup.enter="$emit('enter')"
           @focus="isActive = true"
           @blur="isActive = value.length > 0"
           @input="$emit('input', localValue)" :key="name">
    <label :for="id" :class="{'info-input-label': true, 'is-active': isActive}">{{label}}</label>

  </div>
</template>

<script>
    export default {
        $_veeValidate: {
           value() {
               return this.localValue;
           },
           name() {
              return this.name;
           }
        },
        name: 'InfoTextInput',
        props: {
            id: String,
            label: String,
            ltr: Boolean,
            name: {
                type: String,
                required: true
            },
            type: {
                type: String,
                required: true,
                validator: function (value) {
                    return ['text', 'password', 'email'].indexOf(value) !== -1
                }
            },
            validations: Object,
            value: String
        },
        data() {
            return {
                localValue: this.value,
                isActive: false
            }
        },
        mounted() {
            this.isActive = this.localValue.length > 0
        }
    }
</script>

몇 가지만 추가했습니다.$_veeValidate를 참조해 주세요.또한 당신의 컴포넌트를 변경하여value변경 사항을 로컬 반응 항목에 저장하도록 제안합니다.localValue일반적으로 소품의 가치를 바꾸고 싶지 않지만, 이 단순한 케이스에서는 효과가 있을 수 있습니다.상세한 것에 대하여는, 일방향의 데이터 플로우를 재독해 주세요.

언급URL : https://stackoverflow.com/questions/56688106/how-to-modify-my-custom-input-component-to-work-with-vee-validate