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

Question

我有一个名为 nationality-selector 的自定义输入组件，我这样使用它：

      <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无法验证国籍选择器。 但在其他自定义组件上也可以正常工作。