vue项目的在弹窗上的form表单验证,如下
我们需要清楚清除在下一次进入时,需要清楚这些自动校验的结果或者是表单里面的数据
所以我们使用了下面两个方法
//清空表单数据
this.$refs['formName'].resetFields()
//清空校验规则
this.$refs['formName'].clearValidate();
但是,在实际使用中(遇到弹框清空表单报错,自己在做表单校验的时候,打开弹框的时候清空表单出现),会出现如下两个bug
"Cannot read property 'resetFields' of undefined"
"Cannot read property 'clearValidate' of undefined"
原因分析:mouted加载table数据以后,隐藏的 Dialog 并没有编译渲染进 dom 里面,所以当通过点击事件,Dialog 弹出的时候,$refs 并没有获取到 dom 元素导致
解决方法:做一个if判断即可
,如下
if (this.$refs['formName'] != undefined){
this.$refs['formName'].resetFields();
this.$refs['formName'].clearValidate();
}
如此,上面的报错便可以完美解决