Vue進階（幺幺叄）：關於vue.js 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()》。