iview升级最新版本后 From表单用v-for动态渲染时 绑定的prop 通不过定义的rules规则 老是报空的错误的复现和解决方案
作者：互联网
iview升级最新版本后 From表单用v-for动态渲染时 绑定的prop 通不过定义的rules规则 老是报空的错误的复现和解决方案
前言
最近在研究iview，由于使用的是最新版本的iview3.4.0+的版本，刚好一个场景是需要动态生成表单的，但是发现动态生成的表单居然无法验证，会出现如下的问题，如果在我的动态生成的表单页面上直接调用重置表单的方法，那么我们会发现我们的动态生成的表单的验证会一直报空的错误，以下就是我们的重置方法：
this.$refs['normalForm'].resetFields();
3.2.2版本的演示
首先给大家演示3.2.2版本，这个版本本机的演示的地址是：http://127.0.0.1:8081/#/normalForm，演示步骤：
1、访问http://127.0.0.1:8081/#/normalForm，然后会弹出如下页面：
2、里面的简体中文、繁体中文、英文都是动态生成的，接着我们点击简体中文的输入框，然后失去焦点会看到我们的表单会正常验证
3、然后我们点击重置表单按钮，我们再次点击简体中文的输入框，然后失去焦点会看到我们的表单会还是会正常验证，然后我们在表单中输入任意的字符串，我们会看到表单验证也是正常的，因此在3.2.2版本我们的整个流程是正常的。
3.3.0+版本演示
同样的代码我们将我们的iview升级到3.3.0的版本，然后同步做如上的步骤，大家会发现一个问题，我们的表单验证会出现一个很神奇的现象，那就是动态生成的表单如果，我们有在相应的输入框输入过验证，那么重置表单以后还是会正常的去验证，但是如果重置之前没有触发过验证的那么重置表单将无法验证。
1、访问http://127.0.0.1:8080/#/normalForm会出现如下的页面：
2、我们在简体中文的输入框框那边输入一个任意的值，会出现如下的效果：
3、点击重置表单按钮，将我们的页面的进行重置，接着我们在简体中文的输入框和繁体中文的输入框都输入一个任意的值，这时候就重现了我们的主题的bug了：
解决方案
既然我们已经重现了bug了，我们也定位到问题的处理方式了，那么我们下一步就是着手如何解决该bug了，有以下的几种解决方式：
降版本到3.2.2
最简单的解决方式就是降版本，将iview的版本降到3.2.2的版本就不会出现该问题了。
手动去清空值
使用这种方式会出现一个问题就是，如果我们表单验证是失败的时候，还是会显示表单的错误信息，以下就是点击重置表单按钮的时候的手动清空值的实现方式，真实环境可能需要大家根据自己的情况来进行处理：
for(let a in this.normalForm){
this.normalForm[a] = '';
}
还有记得初始化的时候千万不要把form表单中动态表单的值也一起初始化到normalForm中，否则还是会导致我们的BUG的复现.
换成官方的写法来避免该问题
最后我找到了官方的动态增加form表单的例子，发现该例子不管在那个版本是都可以正常运行的，因此若是IVIEW作者没有修复该问题的话，大家只能使用官方的方式来编写代码来避免该问题，官方地址为：https://www.iviewui.com/components/form
那么对应着本工程中iview-from-demo-3.3.0+中的otherForm.vue中的实现方式就是使用官方例子的方式来实现的。
错误复现以及代码的地址是：https://github.com/lazyboyl/iview-form-issue
标签：验证,rules,重置,表单,normalForm,3.2,版本,报空,prop 来源： https://blog.csdn.net/linzhefeng89/article/details/100030417