Почему использование метода @input для дочернего компонента делает поле грязным? - PullRequest
Новая
       21

Почему использование метода @input для дочернего компонента делает поле грязным?

0 голосов
/ 01 ноября 2019

Я новичок в Vue и пытаюсь подтвердить регистрацию датами. В проекте есть пользовательский компонент для ввода даты, с текстовым полем и календарем при нажатии.

Поскольку метод проверки с Vuelidate, я использую сообщения об ошибках, чтобы проверить, является ли поле $ dirty и показываетошибка, если поле пустое и, как и другое текстовое поле, я представил, что если я использую $ touch () для поля ввода, оно будет работать нормально, как и другие текстовые поля.

Проблема заключается в том,, возможно, потому что я использую проп, чтобы передать метод ввода, когда страница открывается, она уже $ грязная и показывает ошибку, что она пуста. 

<data-component
    :required="true"
    :date="evento.dataInicioCompeticao"
    :input="$v.evento.dataInicioCompeticao.$touch()"
    @update:date="v => evento.dataInicioCompeticao = v"
    :errorsMessages="dataInicioCompeticaoErrors" />

Важная часть внутри компонента данных: 

<template>
    <div>
       <v-menu>
          <template slot="activator">
              <v-text-field
                  v-model="dateFormatted"
                  :label="label"
                  persistent-hint
                  :required="required"
                  clearable
                  return-masked-value
                  mask="##/##/####"
                  :error-messages="errorsMessages"
                  @blur="d = parseDate(dateFormatted); blur;" :color="color"
                  @input="input"
                  :disabled="disabled" :readonly="readonly"
                  :error="error" />
          </template>
          <v-date-picker/>
       </v-menu>
    </div>
</template>
<script lang="ts">

    formatDate(date) {
      if (!date) return "";
      const [year, month, day] = date.split("-");
      return `${day}/${month}/${year}`;
    }

    @Watch("date", { immediate: true, deep: true })
    onDate(val) {
      this.dateFormatted = this.formatDate(this.date);
    }

    @Prop({ required: false })
    input;
    @Prop({ required: false })
    blur;
</script>
...