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个，最好自己断点查看，确保能获取到正确的成员。

再次运行。

验证正常了。