如何使用 vee-validate 3 验证自定义组件？

Question

我正在尝试让 vee-validate 在自定义组件（我称之为 "DatePickerInput"）上工作。
Vee-validate 适用于其他非自定义组件。
DatePickerInput 组件上的 v-model 有效（值在父组件中更新）。

问题：未显示错误消息且“错误”值保持为空：

<validation-provider
    v-slot="{ errors }"
    :name="$t('StartDate')"
    rules="required">
  <div>{{ errors }}</div>
  <DatePickerInput
      v-model="startDate"
      :label="$t('StartDate')"
      :error-messages="errors" />
</validation-provider>

DatePickerInput组件是这样创建的（我删除了一些看似无关的属性）：

<template>
  <v-menu v-model="showMenu">
    <template v-slot:activator="{ on, attrs }">
      <v-text-field
          v-model="date"
          :label="label"
          :error-messages="errorMessages"
          prepend-icon="mdi-calendar"
          v-bind="attrs"
          v-on="on"
          @click:prepend="showMenu = !showMenu"></v-text-field>
    </template>
    <v-date-picker
        :value="isoDate"
        @input="(isoDate) => this.date = isoDate"></v-date-picker>
  </v-menu>
</template>

<script>
export default {
  props: ['value', 'label', 'error-messages'],
  data() {
    return {
      date: this.value,
      showMenu: false,
    }
  },
  computed: {
    isoDate() {
      return new Date(this.date).toISOString().substr(0, 10)
    },
  },
  watch: {
    date: {
      handler(date) { this.handleInput(date) },
    },
  },
  methods: {
    handleInput(e) { this.$emit('input', e) },
  },
}
</script>

为什么不显示错误？

Answer 1

我发现我的问题是什么了。
vee-validate 中的验证由事件触发。
重要事件是 "blur"、"change" 和 "input"。

在我创建的组件中，来自 v-text-field 的事件未传播到父组件。换句话说：当 "blur"、"change" 或 "input" 在 v-text-field 上触发时，我的自定义 DatePickerInput 组件上没有触发任何事件。

为了解决这个问题，我创建了三种方法：

methods: {
    handleInput(e) {
      this.$emit('input', e)
    },
    handleBlur() {
      this.$emit('blur')
    },
    handleChange(newValue, oldValue) {
      this.$emit('change', newValue, oldValue)
    },
  },

并且我将这些方法添加到 DatePickerInput 组件内的 v-text-field 组件：

      ...
      <v-text-field
          v-model="date"
          :label="label"
          :error-messages="errorMessages"
          prepend-icon="mdi-calendar"
          v-bind="attrs"
          v-on="on"
          @blur="on.blur && on.blur($event); handleBlur($event)"
          @change="on.change && on.change($event); handleChange($event);"
          @click:prepend="showMenu = !showMenu"></v-text-field>
      ...

为了确保 v-menu 组件使用的 "on" 中的事件也被触发，我在代码中添加了 on.blur && on.blur($event); 等等。我不确定是否需要这样做，但它确实有效，所以我很高兴。

如何使用 vee-validate 3 验证自定义组件？

How to validate a custom component with vee-validate 3?

vue-component

vuejs2

vuetify.js

vee-validate