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

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

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

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

vue.js vuelidate
person Funkel    schedule 10.11.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я пробовал использовать метод Funkel. но это не работает. но если вы напишете этот метод устранения ошибок электронной почты, как показано ниже, он отлично работает. все в порядке, кроме метода emailErrors.

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

}

person Jubayer Ahmed    schedule 10.05.2021

arrow_upward
0
arrow_downward

Так что я смог понять это. Мой метод, который получал 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;
    }
}
person Funkel    schedule 11.11.2019