关于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),为什么返回错误数组为空?
答案 0 :(得分:1)
如果查看v-text-field
的文档,error-messages
的默认支柱值为空数组[]
。
https://vuetifyjs.com/en/components/text-fields
即使输入没有被触及且不是$ dirty,该函数的默认返回应该总是返回一个空数组,或者我确定Vuetify组件会抛出错误。