Vue.js 无法在对象数组中的每个电子邮件值字段上验证电子邮件
我正在尝试验证包含电子邮件的对象中的值字段。数组中可能有许多这样的对象。当我评估它是否为$dirty时,它表示值未定义。验证也根本不起作用。我以前从未验证过对象数组,因为我假设访问数组中的数据时出错,但我不确定 示例对象:值将包含我尝试验证的电子邮件Vue.js 无法在对象数组中的每个电子邮件值字段上验证电子邮件,vue.js,vuelidate,Vue.js,Vuelidate,我正在尝试验证包含电子邮件的对象中的值字段。数组中可能有许多这样的对象。当我评估它是否为$dirty时,它表示值未定义。验证也根本不起作用。我以前从未验证过对象数组,因为我假设访问数组中的数据时出错,但我不确定 示例对象:值将包含我尝试验证的电子邮件 { option: null, Value: null, Environment: null } 验证: validations: { defaultFields: { $each: { Va
{
option: null,
Value: null,
Environment: null
}
验证:
validations: {
defaultFields: {
$each: {
Value: { email }
}
},
}
自定义错误函数:这就是在第一个If语句上抛出错误的原因,但是验证无论哪种方式都不起作用
computed: {
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;
}
}
这是一个循环的例子,我试图迭代循环中的字段,并验证键入的内容是有效的电子邮件
<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>
所以我能够解决这个问题。接收defaultIndex的方法
:error-messages="emailErrors(defaultIndex)"
位于计算的生命周期挂钩中。在将这个方法移动到生命周期钩子之后,我能够传递索引,它纠正了错误
<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;
}
}
方法:{
电子邮件错误(){
常量错误=[];
如果(!this.$v.defaultFields.$each.Value.$dirty)返回错误;
!this.$v.defaultFields.$each.Value.email&&errors.push('您必须输入有效的电子邮件');
返回错误;
}
}
我正在尝试用Funkel方法来做这件事。但它不起作用。但是,如果你像下面这样写这个email-erros方法,它可以很好地工作。除了emailErrors方法外,一切都正常
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;
}
}