[Vuejs]-Unable to validate email on each email Value field in an array of objects

1πŸ‘

i was trying out Funkel method of doing it. but it doesn’t work. but if you write this email erros method like below it works fine. everything is allright except the emailErrors method.

 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;
}

}

πŸ‘€Jubayer Ahmed

0πŸ‘

So I was able to figure this out. My method that was receiving defaultIndex

:error-messages="emailErrors(defaultIndex)"

Was located in the computed life cycle hook. After moving this to methods life cycle hook I was able to pass in the index and it corrected the error

<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;
    }
}
πŸ‘€Funkel

Leave a comment