validation - 使用 vee validate 验证自定义输入组件

Question

我有一个名为国籍选择器的自定义输入组件，我像这样使用它：

      <validation-provider
        v-slot="{ errors }"
        rules="required"
        class="w-100"
        name="Nationality"
      >
        <nationality-selector v-model="form.nationality" :errors="errors[0]" />
      </validation-provider>

这是vee-validate.js插件：

import Vue from 'vue'
import { ValidationProvider, extend } from 'vee-validate'
import * as rules from 'vee-validate/dist/rules'
import { messages } from 'vee-validate/dist/locale/en.json'

Object.keys(rules).forEach((rule) => {
  extend(rule, {
    // eslint-disable-next-line import/namespace
    ...rules[rule],
    message: messages[rule]
  })
})

Vue.component('validation-provider', ValidationProvider)

问题是 vee validate 无法验证nationality-selector。但在其他自定义组件上它工作正常。

标签： validationvue.jsvee-validate