vue+Element-ui表单组件的坑
开发的需求是注册需要分布进行,由于Element-ui的表单组件比较好用,设置验证规则方便。于是就用了,噩梦就开始了。上需求先!!
1.需求
如图,注册分三步进行,于是第一时间就想到用vue
的v-show
指令,来控制接下来的第二步,第三步的表单显示,于是乎噩梦来了!
注册第一步的图:
注册第二步的图:
2.遇到的坑
当我点击下一步的时候,执行按钮绑定的方法,方法就是当通过了上述表单的每一个验证规则rules
后,把第二步的v-show
设置为true
就可以了,可是当我进入第二步,把表单按照规则完成的时候,执行提交表单按钮的方法,就是通过验证后设置步骤三的v-show
为true
,可是浏览器却死活的报错,说不存在validate
,onSubmit2(ruleForm1)
方法无法执行通过验证后的代码,因为验证函数ruleForm1.validate((valid))
错误
上第二步按钮的代码
第一步的按钮方法,没问题
onSubmit(ruleForm1){
this.$refs.ruleForm1.validate((valid) => {
if (valid) {
//这里写通过验证后执行的方法,
}
});
第二步的按钮方法,和上面的一样,却有问题,通过不了验证
onSubmit(ruleForm2){
this.$refs.ruleForm2.validate((valid) => {
if (valid) {
//这里写通过验证后执行的方法,
}
});
3.解决方法
当我苦苦找了很久答案的时候,忽然把每一步要显示的表单vue
指令v-show
改成了v-if
,问题就完美解决了,是vue
的机制问题导致的。