Vuelidate - 错误验证逻辑答案

【问题标题】：Vuelidate - Error Validation LogicVuelidate - 错误验证逻辑
【发布时间】：2018-06-07 16:33:17
【问题描述】：

关于 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），为什么返回错误数组为空？

【问题讨论】：

标签： vue.js vuetify.js vuelidate

【解决方案1】：

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

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

即使输入未被触及且不是 $dirty，该函数的默认返回值也应始终返回一个空数组，否则我确信 Vuetify 组件会抛出错误。

【讨论】：