如何修改我的自定义输入组件以使用 vee-validate？

Question

我在我的 Vue 项目中创建了一个输入组件，我在我的表单中使用了这个组件。我想使用 vee-validate 来验证我的输入。

首先，我尝试像普通输入一样验证我的组件，但在显示错误消息和检查 Vue Devtools 失败后，我发现错误仅限于输入组件。 （尽管我的所有组件都可以访问两个名为“errors”和“fields”的计算属性，从根到输入组件本身。）

然后我检查了vee-validate docs 并尝试使用Validation Provider 和Validation Observer。这两个组件对我来说太混乱了，即使检查了this medium article，我也无法弄清楚如何使用它们。我不知道这些组件如何使用作用域插槽。

我希望能够验证父级中的输入组件，并在表单上方的父级中显示它们的错误消息。 （有或没有验证观察者和/或验证提供者）。任何方法都值得赞赏。

这是我的输入组件：

<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>

P.S：我已经在全球范围内注册了Validation Observer和Validation Provider。

Answer 1

尝试关注this example：

<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 的本地响应项中。通常，您不会想更改道具的值，尽管它可能适用于这种简单的情况。重读One-Way Data Flow了解详情。