vue+Element-ui表单组件的坑

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的机制问题导致的。