ElementPlus表单验证报错 formEl.validate is not a function

出现问题的代码

  <!-- 密码重置弹框 --><el-dialog v-model="innerVisible" width="500" title="密码重置" append-to-body><el-form ref="ruleFormRef" style="max-width: 600px" :model="passForm" status-icon :rules="rules"label-width="auto" class="demo-ruleForm"><el-form-item label="密码" prop="password"><el-input v-model="passForm.password" type="password" autocomplete="off" /></el-form-item><el-form-item label="确认密码" prop="checkPass"><el-input v-model="passForm.checkPass" type="password" autocomplete="off" /></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button @click="innerVisible = false">取消</el-button><el-button type="primary" @click="resetPass">提交</el-button></div></template></el-dialog>
// 密码重置
const resetPass = (formEl: FormInstance | undefined) => {if (!formEl) returnformEl.validate((valid) => {if (valid) {passForm.id = user.value.idsaveOrUpdate(passForm).then((res: any) => {if (res.code === 200) {innerVisible.value = false;ElMessage.success('提交成功!');// 刷新一下用户信息getUserData()}}).catch((error) => {ElMessage.error(error.message)});} else {console.log('error submit!')}})
}

发现点击提交时,进行校验逻辑时报错,原因是提交表单的按钮那里没有给方法传ruleFormRef:

正确写法 

     <el-button type="primary" @click="resetPass(ruleFormRef)">提交</el-button>

 

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

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

相关文章

HarmonyOS元服务与卡片

元服务与卡片 文章目录 一、元服务1.介绍2.常见元服务项目步骤 二、卡片1.介绍2.卡片的创建3.卡片的数据的变更4.卡片的进程间通讯4.1使用工具包4.2使用步骤 5.卡片路由postCardAction&#xff1a;快速拉起后台5.1格式5.2快速拉起指定页面--router5.3调用后台功能--call5.3卡片…

委托的注册和注销

让我们来回顾一下委托的内容。 委托 是一种复杂的数据类型&#xff0c;需要我们先定义出来。当定义好类型后&#xff0c;声明委托变量来使用。 可以装载方法&#xff0c;只可以装载具有相同返回类型和参数列表的方法。 委托变量名&#xff08;参数列表&#xff09;&#xf…

使用Webpack创建vue脚手架并搭建路由---详解

1.使用 vue 库 vue 是一个非常好用的 javascript 库&#xff0c;现在已经发行了 vue 3&#xff0c;我们可以直接导入使用库文件&#xff0c;也可以使用单文件&#xff08;SFC&#xff09;的形式&#xff0c;直接使用库文件会简单一点&#xff0c;我们先来试一下吧。 1.1安装 v…

Qt 模型视图(二):模型类QAbstractItemModel

文章目录 Qt 模型视图(二)&#xff1a;模型类QAbstractItemModel1.基本概念1.1.模型的基本结构1.2.模型索引1.3.行号和列号1.4.父项1.5.项的角色1.6.总结 Qt 模型视图(二)&#xff1a;模型类QAbstractItemModel ​ 模型/视图结构是一种将数据存储和界面展示分离的编程方法。模…

巡检管理系统软件:功能与逻辑的深度探索

在现代企业管理中&#xff0c;巡检管理系统软件扮演着至关重要的角色。巡检管理系统不仅能提升巡检工作的效率和准确性&#xff0c;还能为企业的整体运营提供有力支持。下面将从功能与逻辑两个方面对巡检管理系统软件进行深入分析。 一、巡检管理系统软件的功能 巡检计划制定 …

快速体验Linux发行版:DistroSea详解与操作指南

DistroSea 是一个功能强大的在线平台&#xff0c;允许用户在无需下载或安装的情况下&#xff0c;通过浏览器直接测试多种Linux和BSD发行版。该平台非常适合Linux爱好者、系统管理员和开发者&#xff0c;提供一个简便的方式来体验各种操作系统而无需影响本地设备。 为什么选择D…

CleanMyMac 5 for Mac 最新中文破解版下载 系统优化垃圾清理工具

今天给大家带来的是CleanMyMac最新款CleanMyMac 5&#xff0c;它是一个全面的Mac清理和维护工具&#xff0c;通过提供多项强大的功能&#xff0c;帮助用户简化日常维护任务&#xff0c;提升系统性能&#xff0c;同时保护个人隐私和安全。无论是新手还是经验丰富的Mac用户&#…

如何实现实时监控局域网计算机桌面?学会这5个妙招你就能搞定!

在现代企业环境中&#xff0c;实时监控局域网内的计算机桌面已成为确保工作效率、维护信息安全的重要手段。 无论是出于管理需求还是安全考虑&#xff0c;掌握这一技能对于IT管理员来说都至关重要。 本文将详细介绍五个妙招&#xff0c;帮助你轻松实现局域网内计算机桌面的实…

python 自动化测试接口

比如我们要测试接口&#xff1a;identity/chatRecords/pages 已在Postman中有&#xff0c;那我们就可以直接从里面复制出Python脚本 新建&#xff1a; pagerequest.py import requests import jsonurl "http://192.168.31.132:70/identity/chatRecords/pages"payl…

gin配置swagger文档

一、基本准备工作 1、安装依赖包 go get -u github.com/swaggo/swag/cmd/swag go get -u github.com/swaggo/gin-swagger go get -u github.com/swaggo/files2、在根目录上配置swagger的路由文件 //2.初始化路由router : initialize.Routers()// 配置swaggerdocs.SwaggerInfo…

【网络安全】-ssrf服务器请求伪造攻击-burp

SSRF攻击服务器请求伪造攻击 CSRF攻击跨站请求伪造攻击也称客户端请求伪造攻击 两种攻击最主要的区别是一个在服务器&#xff0c;一个在客户端。 文章目录 前言 什么是SSRF攻击? 1.分类&#xff1a; 针对服务器的 SSRF 攻击&#xff1a; 针对后端系统的SSRF攻击&#xff1a; …

一篇文章解决ComfyUI常见的故障报错!

前言 学习和使用ComfyUI最痛苦的是什么&#xff1f;就是这满屏的红色方框和和[报错信息] “报错信息”)&#xff0c;处理完一批又一批&#xff0c;很多人玩了一两个流程就搞不下去了&#xff0c;很多初学者因此就放弃了。 有道是&#xff1a;配置流程大半天&#xff0c;跑通出…

【Python机器学习】NLP信息提取——值得提取的信息

目录 提取GPS信息 提取日期 如下一些关键的定量信息值得“手写”正则表达式&#xff1a; GPS位置&#xff1b;日期&#xff1b;价格&#xff1b;数字。 和上述可以通过正则表达式轻松捕获的信息相比&#xff0c;其他一些重要的自然语言信息需要更复杂的模式&#xff1a; 问…

【win工具】win安装flameshot并设置截图快捷键

1.下载flameshot软件2.windows端配置flameshot快捷键3.取消win自带截图快捷键 1.下载flameshot软件 https://flameshot.org/#download installer版本为安装包 portable版本为免安装版 2.windows端配置flameshot快捷键 https://cloud.tencent.com/developer/article/2114952 W…

Linux 防火墙:iptables (二)

文章目录 SNAT 原理与应用SNAT 应用环境SNAT 原理SNAT 转换前提条件SNAT 格式SNAT 转换规则配置 DNAT 原理与应用DNAT 应用环境DNAT 原理DNAT 转换前提条件DNAT 格式DNAT 转换规则配置 iptables 规则的备份和还原导出&#xff08;备份&#xff09;所有表的规则导入&#xff08;…

电脑USB端口禁止软件有哪些?什么软件能指定USB端口禁用?分享四款好用软件!

想象一下&#xff0c;你正准备在办公桌上插入U盘&#xff0c;打算快速拷贝文件&#xff0c;突然系统蹦出一个警告&#xff1a;“这个USB端口已被禁用&#xff01;” 是不是感觉好像被一双隐形的手制止了&#xff1f; 其实&#xff0c;这双“隐形的手”就是专门为企业安全设计…

redis群集三种模式:主从复制、哨兵、集群

redis群集有三种模式 redis群集有三种模式&#xff0c;分别是主从同步/复制、哨兵模式、Cluster&#xff0c;下面会讲解一下三种模式的工作方式&#xff0c;以及如何搭建cluster群集 ●主从复制&#xff1a;主从复制是高可用Redis的基础&#xff0c;哨兵和集群都是在主从复制…

集采良药:从“天价神药”到低价良药,伊马替尼的真实世界研究!

在医疗科技日新月异的今天&#xff0c;有一种药物以其卓越的疗效和深远的影响力&#xff0c;成为了众多患者心中的“精准武器”——伊马替尼。这款药物不仅在慢性髓细胞白血病&#xff08;CML&#xff09;的治疗上屡创佳绩&#xff0c;更是胃肠道间质瘤&#xff08;GIST&#x…

哪个牌子的护眼台灯性价比高?网上排名前列的护眼台灯推荐

现在市面上形形色色的打着“护眼”口号的台灯太多了&#xff0c;因为眼睛对于我们来说很重要&#xff0c;我们看到美丽的事物都因为有他&#xff0c;所以大家一听到护眼就会选择购买。很多商家为了赚钱&#xff0c;随便贴个标签就说护眼&#xff0c;其实一点用都没有。哪个牌子…

AJAX Jquery $.get $.post $.getJSON

AJAX AJAX Asynchronous JavaScript and XML (异步的J avascript和XML)。 Ajax $.ajax <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, in…