解决：Cannot read properties of undefined (reading ‘validate‘)问题

最新推荐文章于 2025-01-11 09:39:51 发布

梅秃头

最新推荐文章于 2025-01-11 09:39:51 发布

阅读量2.9k

点赞数 4

分类专栏：前端开发 BUG 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/qq_53376718/article/details/137554265

版权

BUG 同时被 2 个专栏收录

19 篇文章

订阅专栏

前端开发

11 篇文章

订阅专栏

文章讲述了在使用ElementUI进行表单验证时遇到Cannotreadpropertiesofundefined错误，解决方案是为el-form添加ref属性，并提供了一个包含表单、对话框和验证方法的完整示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：Element UI使用表单校验功能控制台出现Cannot read properties of undefined (reading 'validate')报错

解决：在 <el-form :model="form" :rules="rules">添加 ref="form"，form为自定义的表单名称

 <el-form :model="form" :rules="rules" ref="form"></l-form>

完整案例

添加/修改表单代码

<!-- 新增/更新 -->
    <div>
      <el-dialog :title="(form.id == null ? '新增' : '更新')" :visible.sync="dialogFormVisible" width="40%">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="学号" prop="number" label-width="20%">
          <el-input v-model="form.number" autocomplete="off" placeholder="请输入学号" style="width:80%"/>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('form')">取 消</el-button>
        <el-button type="primary" @click="submit('form')">确 定</el-button>
      </div>
    </el-dialog>
    </div>

<script>
    export default {
      data() {
        return {
            // 表单
            form:{},
            // 表单模态框
            dialogFormVisible:false,
            // 新增/更新表单校验
            rules: {
                 number: [
                    { required: true, message: '学号不能为空', trigger: 'blur' }
                 ],
             },
    	}
    }

    methods:{
    	// 提交表单数据
        async submit(form){
          this.$refs[form].validate(async (valid) => {
            if (valid) {
              await this.apiInsert()
              this.select()
            }
          })
        },
        apiInsert(){
          return new Promise(resolve => {
            insert(this.form).then(res => {
              if(res.code === 200){
                this.dialogFormVisible = false
                resolve()
              }else{
                this.$message.error(res.message.message)
                resolve()
              }
            })
          })
        },
        // 取消
        resetForm(form) {
          this.dialogFormVisible = false
          this.$refs[form].resetFields();
        },
    }
  }
</script>