Vue：Element-UI的表單驗證出現validate is not function錯誤解決方法

前端使用Vue框架，並用Element UI組件庫搭建管理系統

按照官網的demo，表單html代碼如下

      <!-- 新建用戶 -->
      <el-dialog title="新建用戶" :visible.sync="addUserVisible" ref="addUserForm" v-dialogDrag>
        <el-form :model="addUserForm" :rules="addUserRule">
          <el-form-item label="用戶名" :label-width="formLabelWidth" prop="username">
            <el-input v-model="addUserForm.user_name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色名稱" :label-width="formLabelWidth" prop="rolename">
            <el-select v-model="addUserForm.rolename">
              <el-option label="admin" value="admin"></el-option>
              <el-option label="管理員" value="管理員"></el-option>
              <el-option label="超級管理員" value="超級管理員"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="狀態" :label-width="formLabelWidth">
            <el-radio v-model="addUserForm.isable" label="1">正常</el-radio>
            <el-radio v-model="addUserForm.isable" label="0">禁用</el-radio>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addUserVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('addUserForm')">確 定</el-button>
        </div>
      </el-dialog>

js代碼如下

    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

官方demo完整代碼 可以查看https://element.eleme.cn/#/zh-CN/component/form 下的Form表單章節。

問題

現在看下問題。

在chrome運行頁面後，控制檯提示“validate is not function”

異常定位在this.$refs[formName].validate 這裏。

改成this.$refs.addUserForm.validate方式也不行。

解決方案1

表單標籤的<el-form :model="addUserForm" :rules="addUserRule"> 這裏，漏了一個ref="addUserForm"。補上去後就正常了。

 

解決方案2(之前未發現解決方案1的問題時找到的此方法)

1.在控制檯斷點到this.$refs[formName].validate，並把鼠標放到$refs上，可以看到對應的addUserForm下$children有個3成員，打開查看後發現第2個纔是我們需要的，且這個成員下才有validate方法。也就是說，this.$refs[formName]裏面是數組，需要帶[索引]來檢索。

所以代碼調整下，this.$refs[formName].validate改爲this.$refs[formName].$children[2].validate。

注：正常情況成員只有一個，即this.$refs[formName].$children[0].validate。

本例特殊，兩個按鈕el-button因爲頁面顯示效果要放到單獨div裏面並且放到<el-form>外面了，導致成員有3個，最好自己斷點查看，確保能獲取到正確的成員。

再次運行。

驗證正常了。