Блог

Я пытаюсь заставить vee-validate работать с пользовательским компонентом (который я назвал "DatePickerInput" ).
Vee-validate работает с другими нестандартными компонентами.
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>
 

Почему не отображаются ошибки?

Я выяснил, в чем была моя проблема.
Проверка в 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)
    },
  },
 

И я добавил эти методы в 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 amp;amp; on.blur($event); handleBlur($event)"
          @change="on.change amp;amp; on.change($event); handleChange($event);"
          @click:prepend="showMenu = !showMenu"></v-text-field>
      ...
 

Чтобы убедиться, что события, "on" которые v-menu использует компонент, также были запущены, я добавил on.blur amp;amp; on.blur($event); в код и так далее. Я не уверен, что это необходимо, но это работает, так что я счастлив.