동적 사용자 지정 구성 요소에 대한 V 유효성 검사

동적 사용자 지정 구성 요소에 대한 V 유효성 검사

나는 Vee-validate (https://baianat.github.io/vee-validate/)을 나의 모든 양식을 검증하기 위해 사용하고 있다.이제 다음 작업을 수행하고자 한다.

내 형태에서 "값" 필드는 동적인 구성요소로서, 다음에 따라 달라진다.type현재의 목적의유형은 다음과 같을 수 있다.integer,string,decimal등

그래서 유형이 바뀌면 입력도 바뀐다.

이렇게 한 거야

   <component
     :name="'attribute-value'"
     v-model="attribute.value"
     :is="attribute.type">
   </component>

그리고

import string from '@/components/fields/String'
import integer from '@/components/fields/Integer'
import decimal from '@/components/fields/Decimal'

export default {
  name: 'edit',
  metaInfo: {
    title: 'Edit'
  },
  components: {
    string, integer, decimal
  },
}

좋아 - 각 분야마다 자체 검증이 있어야 한다.그integer-필드는 숫자만 허용해야 한다.그래서 이렇게 하고 싶다.

<template>
    <b-input
      :id="name"
      :name="name"
      type="number"
      v-validate="{ required: true, numeric: true }"
      :state="errors.has(name) ? 'invalid' : ''"
      :value="value"
      v-on:input="$emit('input',$event)"/>
</template>
<script>
export default {
    name: 'Integer',
    inject: {
        $validator: '$validator'
    },
    props: ['name', 'value'],

    $_veeValidate: {
        name() {
            return this.name;
        },
        value() {
            return this.value;
        }
    },
}
</script>

유감스럽게도 숫자 이외의 것을 입력하면 오류가 표시되지 않는다.그리고: 상위 구성요소에 대한 제출 방법은 제출을 방해하지 않는다.

너의 모든 코멘트에 감사한다 :-)

v-model 대신 v-bind를 사용하여 구성 요소에 데이터를 전달하십시오.또 다른 방법은 입력 전류 개체를 소품으로 사용하는 BaseInput이라고 하는 하나의 일반적인 구성 요소를 만들 수 있는 것이다.BaseInput 구성 요소 내에서 다음과 같은 v-if를 사용하여 정수 또는 문자열 구성 요소를 선택할 수 있다.

<template v-if="inputCurrentObject.type === 'string' ">
  <Integer :input="inputCurrentObject.value" />
</template>

BaseInput 내부에서는 입력 유형을 기준으로 구성 요소를 렌더링할 수 있다.

참조URL: https://stackoverflow.com/questions/56577148/v-validate-on-dynamic-custom-component