一、前言
在开发Vue
项目过程中,应用element-ui
做表单验证遇到this.$refs[formName].validate()
提示validate()
未定义的问题。
二、问题原因
要验证的DOM
,还没有加载出来。
三、解决方法
首先打印一下this.$refs[formName]
,检查是否拿到了正确的需要验证的form
(有时候获取到数组,需要按下标取值)。
其次在拿到了正确的form
后,检查该form
上添加的表单验证是否正确,需要注意的点有:
-
使用此方法前检查
prop
一定必须要写在<el-form-item>
标签上面,写在里面的input
上或者其他任何地方都不行(el-form-item
prop
属性绑定); -
el-form
rules
,model
属性绑定,ref
标识;
针对问题一的解决方法如下:
this.$nextTick(() =>{
})
有关$nextTick
的具体用法,请参考博文《Vue进阶(六十二):理解$nextTick()》。