动态循环多表单校验获取不到ref

循环表单校验获取不到ref

一、问题概述:

首先说一下我的使用场景(uniapp):一个页面内五个表单,使用tab来切换展示。
这种情况下只能是页面写一个表单,通过循环数据来分别展示的。
表单大致填写完成点确定按钮肯定要做正则校验的,通过ref,然后校验那里使用this.$refs.form.validate() 的方式来做校验,但是我后面发现一个问题, 只有第一个表单可以获取到ref的内容,后面循环出来的表单都无法获取到,在后面表单上填写信息时,明明已经填写正确格式的内容,但是校验依然会一直提示,好像填写的内容并没有在当前表单生效。

二、解决办法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这样就可以获取到每个表单的ref了,但是还有一个关键的问题,获取是获取到了,但是填写表单时校验依然没有生效
原因是因为mode那里我直接使用了循环的值 item ,需要改成下面这样的形式才行
在这里插入图片描述在这里插入图片描述

这样,所有表单校验就都不会有问题了。

猜你喜欢

转载自blog.csdn.net/yangsi0706/article/details/129354970