Vue 进阶（幺幺叁）：element ui 表单验证 this.$refs[formName].validate() 问题解决

一、前言

在开发Vue项目过程中，应用element-ui做表单验证遇到this.$refs[formName].validate()提示validate()未定义的问题。

二、问题原因

要验证的DOM，还没有加载出来。

三、解决方法

首先打印一下this.$refs[formName]，检查是否拿到了正确的需要验证的form（有时候获取到数组，需要按下标取值）。

其次在拿到了正确的form后，检查该form上添加的表单验证是否正确，需要注意的点有：

1. 使用此方法前检查prop一定必须要写在<el-form-item>标签上面，写在里面的input上或者其他任何地方都不行（el-form-item prop属性绑定）；

2. el-form rules，model属性绑定，ref标识；

针对问题一的解决方法如下：

this.$nextTick(()  =>{ })

有关$nextTick的具体用法，请参考博文《Vue进阶（六十二）：理解$nextTick()》。

四、拓展阅读

• 《Vue进阶（幺零六）：子组件处理父组件异步值传递给子组件处理》

• 《Vue进阶（九十二）：应用 postMessage 实现窗口通信》