Vuelidate错误验证逻辑

Question

关于vuetify表单验证的官方示例(使用vuelidate)，

<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是一个计算方法，它返回字段的所有错误。

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

有人能解释一下这条线的意思吗？

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

如果字段没有被修改(不是$dirty)，为什么返回错误数组为空？

Answer 1

如果您查看v-text-field的文档，error-messages的默认支持值是和空数组[]。

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

即使输入没有被触摸并且不是$dirty，该函数的默认返回也应该总是返回一个空数组，或者我确信Vuetify组件会抛出一个错误。