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

问题: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>

js

<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 = falseresolve()}else{this.$message.error(res.message.message)resolve()}})})},// 取消resetForm(form) {this.dialogFormVisible = falsethis.$refs[form].resetFields();},}}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/803815.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

A Learning-Based Approach for IP Geolocation

下载地址:Towards IP geolocation using delay and topology measurements | Proceedings of the 6th ACM SIGCOMM conference on Internet measurement 被引次数:185 Abstract 定位IP主机地理位置的能力对于在线广告和网络攻击诊断等应用程序是非常吸引力的。虽然先前的方…

ruoyi-nbcio-plus基于vue3的flowable的自定义业务单表例子的升级修改

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 http://122.227.135.243:9666/ 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a…

SQL查询:UNION用法详解

在SQL查询中&#xff0c;UNION是一种非常有用的操作符&#xff0c;它可以将两个或多个SELECT语句的结果集合并成一个结果集。每个SELECT语句必须拥有相同数量的列&#xff0c;且相应的列也必须具有相似的数据类型。UNION的结果集自动去除了重复的行&#xff0c;如果要包含重复行…

JVM指令:方法调用之解析调用

文章目录 介绍-方法调用指令1.invokestatic静态方法测试类反编译字节码 2.invokespecial特殊方法测试类反编译字节码 3.invokeinterface接口方法测试类反编译字节码 4.invokedynamic动态调用方法测试类反编译字节码 5.invokevirtual虚方法测试类反编译字节码 介绍-方法调用指令…

[Kubernetes集群:master主节点初始化]:通过Calico和Coredns网络插件方式安装

文章目录 前置&#xff1a;Docker和K8S安装版本匹配查看0.1&#xff1a;安装指定docker版本 **[1 — 7] ** [ 配置K8S主从集群前置准备操作 ]一&#xff1a;主节点操作 查看主机域名->编辑域名->域名配置二&#xff1a;安装自动填充&#xff0c;虚拟机默认没有三&#xf…

程序员如何搞副业?在线教育!

程序员如何搞副业&#xff1f; 程序员不仅拥有将抽象概念转化为实际应用的能力&#xff0c;还通常具备强大的逻辑思维和问题解决能力。然而&#xff0c;许多程序员并不满足于仅仅在一家公司工作&#xff0c;他们渴望通过副业来实现个人价值的最大化&#xff0c;增加收入&#…

深度学习-多尺度训练的介绍与应用

一、引言 在当今快速发展的人工智能领域&#xff0c;多尺度训练已经成为了一种至关重要的技术&#xff0c;特别是在处理具有复杂结构和不同尺度特征的数据时。这种技术在许多应用中发挥着关键作用&#xff0c;例如图像识别、自然语言处理和视频分析等。 多尺度训练的定义 多尺…

使用C++语言构建基于mysql API的统一数据库访问接口

文章目录 基本设计理念mysql的基本API基本的demo示例自增的处理架构设计代码DataRecord接口DataRecord代码TABLE A数据结构类DBAdaptermysql Adapterbusiness层在java这种web领域的后台语言里,操作数据库的框架已经炉火纯青,非常的成熟,包括了关系型数据库和非关系型等。 关…

「44」直播间换脸,揭开神秘的面纱……

「44」换脸神器 让你瞬间秒变「明星脸」带货 DeepFace是Facebook的人脸识别系统之一&#xff0c;旨在在照片和视频中准确识别和标识人脸。它使用深度学习和神经网络技术来进行高度精确的人脸匹配和验证。 DeepFace利用了大量的训练数据和先进的人脸识别算法&#xff0c;能够…

小程序中展示富文本 图片不适配?视频不显示?

最近遇到一个问题在小程序中渲染富文本的内容&#xff0c;如果里面有图片和视频&#xff0c;渲染的时候图片大小超屏幕了&#xff0c;而视频完全没有显示&#xff01;&#xff01;&#xff01; 最后通过正则匹配替换后 图片可以了视频还是不行&#xff0c;看了微信小程序api官…

react项目中需要条形码功能,安装react-barcode使用时报错

react项目中需要条形码功能&#xff0c;用yarn add安装react-barcode后&#xff0c;在项目中使用import Barcode from ‘react-barcode’&#xff0c;页面中一直白屏&#xff0c;加载中 查看控制台报以下错误 load component failed Error: Module "./react-barcode"…

Word 画三线表模板---一键套用

1、制作三线表 1&#xff09;设置为无边框 选中表格&#xff0c;点击「右键」——「边框」——「无框线」。 2&#xff09;添加上下边框线 选中表格后&#xff0c;点击【右键】——【表格属性】——【边框和底纹】&#xff0c;边框线选择【1.5磅】&#xff0c;然后点击【上框…

【数组】【最长距离】使循环数组所有元素相等的最少秒数

本文涉及知识点 数组 最长距离 LeetCode2808. 使循环数组所有元素相等的最少秒数 给你一个下标从 0 开始长度为 n 的数组 nums 。 每一秒&#xff0c;你可以对数组执行以下操作&#xff1a; 对于范围在 [0, n - 1] 内的每一个下标 i &#xff0c;将 nums[i] 替换成 nums[i] …

react17+18 中 setState是同步还是异步更新

在类组件中使用setState&#xff0c;在函数式组件中使用hooks的useState。 setstate目录 1. 类组件1.1 react 17版本1.2 react 18版本 2、函数式组件 1. 类组件 1.1 react 17版本 参考内容&#xff1a;第十一篇&#xff1a;setState 到底是同步的&#xff0c;还是异步的&…

【BUG】element-ui表格中使用video标签,数据翻页,video中的视频仍然显示第一页的视频,没有重新加载

BUG描述 遇到一个问题&#xff0c;使用element-ui构建的管理端后台&#xff0c;表格里面每一行都有一个video标签&#xff0c;里面有视频&#xff0c;当我翻页了以后&#xff0c;视频不会重新加载&#xff0c;仍然显示的是第一页的视频&#xff0c;代码如下&#xff1a; <e…

24.Linux下程序调试分析工具`Valgrind`

Linux下程序调试分析工具Valgrind 文章目录 Linux下程序调试分析工具Valgrind1.基本介绍2.下载编译安装Valgrind C程序内存扫描示例reference 欢迎访问个人网络日志&#x1f339;&#x1f339;知行空间&#x1f339;&#x1f339; 1.基本介绍 Valgrind是开源的Linux程序调试工…

Openstack(T)openstack event list 验证panko,显示为空

部署完panko,通过执行openstack event list 显示为空 表示没有获取到事件数据 排错思路: 1.保障ceilometer panko服务都是正常的 2.保障ceilometer 到 panko 的数据传输&#xff0c;是正确配置从采集点到存储点的 下面展示配置详情&#xff0c;执行openstack event list 事…

ROS中不同情况下配置文件的编写

配置文件 话题中自定义msg1. 编写msg2. 编辑package.xml3. 编辑CMakeLists.txt4. 编译5. 使用5. 在其他功能包中调用msg5.1 编辑package.xml5.2 编辑CMakeLists.txt 服务中自定义srv1. 编写srv2. 其他 调用头文件1. 编写头文件2. (可选&#xff0c;为了编程时有代码提示)3. 编写…

opencv+python(二值化图像)

1、全局二值化&#xff1a;将图像全部变成两种值&#xff0c;比如&#xff1a;0&#xff0c;255 threshold(src: ndarray&#xff08;图像&#xff0c;最好是灰度图&#xff09; thresh: float,&#xff08;阙值&#xff09; maxval: float,&…

function 包装器 ——C++新特性(二)

文章目录 包装器function包装器可以包装可调用对象其他使用示例 &#x1f396; 博主的CSDN主页&#xff1a;Ryan.Alaskan Malamute &#x1f4dc; 博主的代码仓库主页 [ Gitee ]&#xff1a;ryanala [GitHub]&#xff1a; Ryan-Ala 包装器 function 使用 function包装器…