CODEWITHSUNDEEP
vue.jsvuetify.jsvuelidate
mremane
mremane

Reputation: 103

Vuelidate - Error Validation Logic

On the official example of vuetify's form validation (using vuelidate) there's

<v-text-field
  v-model="name"
  :error-messages="nameErrors"
  :counter="10"
  label="Name"
  required
  @input="$v.name.$touch()"
  @blur="$v.name.$touch()"
></v-text-field>

nameErrors being a computed method that returns all errors for the field.

  nameErrors () {
    const errors = []
    if (!this.$v.name.$dirty) return errors
    !this.$v.name.maxLength && errors.push('Name must be at most 10 characters long')
    !this.$v.name.required && errors.push('Name is required.')
    return errors
  },

Can someone please explain me what is the point of the line

if (!this.$v.name.$dirty) return errors

Why return the error array empty if the field has not been modified (not $dirty)?

Upvotes: 0

Views: 1750

Answers (1)

lpie88
lpie88

Reputation: 993

If you look at the documentation for v-text-field the default prop value of error-messages is and empty array [].

https://vuetifyjs.com/en/components/text-fields

Even if the input has not been touched and is not $dirty the default return for that function should always return an empty array or I'm sure that the Vuetify component would throw an error.

Upvotes: 1

Related Questions