Невозможно проверить электронную почту в каждом поле Значение электронной почты в массиве объектов - PullRequest
Новая
       12

Невозможно проверить электронную почту в каждом поле Значение электронной почты в массиве объектов

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

Я пытаюсь проверить поле значения в объекте, содержащем электронное письмо. В массиве может быть потенциально много таких объектов. Когда я оцениваю, грязный ли он, он говорит, что Значение не определено. Проверка также не работает вообще. Я никогда ранее не проверял массив объектов, так как предполагал, что я получаю неправильный доступ к данным в массиве, но я не уверен

Пример объекта: Значение будет содержать адрес электронной почты, который я пытаюсь проверить 

{
   option: null,
   Value: null,
   Environment: null
}

Проверки: 

validations: {
    defaultFields: {
      $each: {
        Value: { email }
      }
    },
  }

Пользовательская функция ошибок: это то, что выдает ошибку в первом операторе If, но проверка не работает в любом случае 

computed: {
  emailErrors() {
      const errors = [];
      if (!this.$v.defaultFields.$each.Value.$dirty) return errors;
      !this.$v.defaultFields.$each.Value.email && errors.push('You must enter a valid email');
      return errors;
    }
}

Это пример цикла и поля в цикле, который я пытаюсь перебрать и проверить, что набрано, является действительным адресом электронной почты. 

<v-form>
    <div v-for="(defaultField, defaultIndex) in defaultFields" v-bind:key="`${defaultIndex}-default`">
        <v-text-field
        @input="$v.defaultFields.$each[defaultIndex].Value.$touch()"
        @blur="$v.defaultFields.$each[defaultIndex].Value.$touch()"
        :error-messages="emailErrors(defaultIndex)"
        id="value"
        v-model="defaultField.Value"
        label="Email Address"
        type="email"
        ></v-text-field>
    </div>
</v-form>

1 Ответ

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

Так что я смог понять это. Мой метод, который получал defaultIndex 

:error-messages="emailErrors(defaultIndex)"

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

<v-form>
    <div v-for="(defaultField, defaultIndex) in defaultFields" v-bind:key="`${defaultIndex}-default`">
        <v-text-field
        @input="$v.defaultFields.$each[defaultIndex].Value.$touch()"
        @blur="$v.defaultFields.$each[defaultIndex].Value.$touch()"
        :error-messages="emailErrors(defaultIndex)"
        id="value"
        v-model="defaultField.Value"
        label="Email Address"
        type="email"
        ></v-text-field>
    </div>
</v-form>


methods: {
  emailErrors() {
      const errors = [];
      if (!this.$v.defaultFields.$each.Value.$dirty) return errors;
      !this.$v.defaultFields.$each.Value.email && errors.push('You must enter a valid email');
      return errors;
    }
}
...