多个动态生成的标签,添加validate校验

问题

此时ref命名都一样为test,不能直接使用this. r e f s . t e s t . v a l i d a t e ( ) 校验,因为此时 t h i s . refs.test.validate()校验,因为此时this. refs.test.validate()校验,因为此时this.refs.test获取到的是数组对象

处理

// 创建数组用于保存所有的验证是否通过
let valids =[]
this.$refs.test.forEach((item) =>{
	item.validate(valid =>{
		valids.push(valid)
	})
})
// 只要有一个结果不为true就返回false
let finalValid = valids.every((item) =>{
	retrun item == true
})
if(!finalValid) return
// 提交后台代码省略

新问题

将以上代码嵌入提交代码时,发生了校验后执行完于提交代码(也就是方法中数据没有按代码顺序执行)。

再处理

此时采取方法名称上添加async,方法内部方法前添加await;对嵌套foreach中的方法,无法添加await就用for循环代替foreach再添加await。确保方法中代码按顺便执行。

// 创建数组用于保存所有的验证是否通过
let valids =[]
for (let index =0; index < this.$refs.test.length; index++){
	const tmpTest = this.$refs.test[index]
	await tmpTest.validate(valid =>{
		valids.push(valid)
	})
}
// 只要有一个结果不为true就返回false
let finalValid = await valids.every((item) =>{
	retrun item == true
})
if(!finalValid) return
// 提交后台代码省略
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值