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

Question

我正在尝试让vee验证来处理一个定制组件(我称之为"DatePickerInput")。

验证其他非自定义组件的工作。

v-model在DatePickerInput组件上工作(值在父组件中更新)。

问题:没有显示错误消息，“错误”值保持为空：

<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

我发现了我的问题所在。

验证是由事件触发的。

重要的事件是"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)
    },
  },

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

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

为了确保"on"组件使用的事件也被触发，我在代码中添加了on.blur && on.blur($event);等等。我不确定这是必要的，但它起作用了，所以我很高兴。