当前位置: 首页 > news >正文

解决Vue+Element UI使用表单rules国际化时From表单验证信息不能实时更新

说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家!

博主在工作之余开始进行自动化测试平台的开发,虽然已经996一个月了但是还是在使劲挤时间做这件事情,目前平台使用前端框架vue-element-admin进行简化后二次开发,目前保留了原框架中的国际化、主题色、全局搜索、字体大小以及右侧悬浮设置菜单,更多细节后续会在系列文章中进行更新~

问题描述

在默认中文时,点击登录或者失去输入框焦点时测试时,表单验证消息没有问题如图1,此时如果切换到英文时就会出现验证信息还是中文的情况如图2所示

在这里插入图片描述
在这里插入图片描述

点击注册按钮切换注册表单,此时会重置表单数据,所以不会出现验证提示信息与语言不符情况

在这里插入图片描述

解决方法

方法1

使用computed计算属性监控自己定义的变量

computed: {loginRules() { // :rules="loginRules"return {username: [{ required: true, message: this.$t('login.errUserNameMsg'), trigger: 'blur' }],password: [{ required: true, message: this.$t('login.errPasswordMsg'), trigger: 'blur' }]}}}

方法2

通过watch监听切换中英文时,重置表单验证,这个是博主比较喜欢的,其实不需要保留上一次语言产生的验证提示,直接重置这样看着比较舒服干净,也不存在语言与提示信息不符的情况

watch: {// 监听切换中英文时,重置表单验证'$i18n.locale': function() {this.$refs['loginForm'].clearValidate()}
}

最终效果

在这里插入图片描述

相关文章:

解决Vue+Element UI使用表单rules国际化时From表单验证信息不能实时更新

说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 博主在工作之余开始进行自动化测试平台的开发,虽然已经996一个月了但是还是在使劲挤时间做这件事情,目前平台使用前端框架vu…...

友善之臂NanoPi NEO利用fbtft驱动点亮1.69寸ST7789V2屏幕

屏幕介绍 本文以中景园1.69寸LCD,驱动芯片ST7789V2该款屏幕示例,屏幕的分辨率为240*280 屏幕引脚说明 NanoPi NEO IO介绍 屏幕与板子的IO连接关系 屏幕NanoPi NEOGNDGNDVCC3.3VSCLPC2SDAPC0RESPG11DCPA1CSPC3BLKPA0 下载交叉编译器和linux内核源码并按教…...

MFC第三十天 通过CToolBar类开发文字工具栏和工具箱、GDI+边框填充以及基本图形的绘制方法、图形绘制过程的反色线模型和实色模型

文章目录 CControlBar通过CToolBar类开发文字工具栏和工具箱CMainFrame.hCAppCMainFrm.cppCMainView.hCMainView.cppCEllipse.hCEllipse.cppCLine.hCLine.cppCRRect .hCRRect .cpp CControlBar class AFX_NOVTABLE CControlBar : public CWnd{DECLARE_DYNAMIC(CControlBar)pro…...

Android Https

本质:在客户端和服务端使用非对称加密协商出一套对称密钥,每次发送数据前加密,收到后解密,达到加密传输 http ssl 在http之下增加了安全层,用于保障http的加密传输 HTTPS连接 TLS连接步骤 1.客户端发送 client h…...

Games101学习笔记2

参考博客:GAMES101 梳理 / 个人向图形学笔记_games101笔记_river_of_sebajun的博客-CSDN博客 lecture 05 Rasterization 1(Triangles) 光栅化 把东西画在屏幕上的过程就是光栅化的过程 视口变换 为什么模型用三角形? 最基本的几何平面;保…...

java字符串String类的常用方法

java字符串String类的常用方法 字符串的创建: (1)定义字符串直接赋值,在字符串池中开辟空间() String str1“Hello”;//在字符串池中写入字符串"hello" String str2“Hello”;//直接引用字符串池中的"Hello" System.out.println(s…...

自动化测试如何解决chrome自动更新问题

问题 调试好的自动化测试脚本,有时候总是在第一天或过几天就不好使了。产品并未进行功能逻辑,ui修改,一切还和调试自动化脚本的时候保持一致。运行自动化测试脚本时,控制台总是会在driver webdriver.Chrome()这一行报错。 问题…...

闲鱼卖货:新手容易踩坑的7个地方。赶紧看看有没有中招?

科思创业汇 大家好,这里是科思创业汇,一个轻资产创业孵化平台。赚钱的方式有很多种,我希望在科思创业汇能够给你带来最快乐的那一种! 这是我以前的一个学生收到的第一个非法通知。他告诉我,他当时很害怕,…...

PowerShell 获取某目录下所有的文件、文件夹,同时对获取到的文件路径字符串进行替换处理

PowerShell 获取某目录下所有的文件、文件夹,同时对获取到的文件路径字符串进行替换处理 前言: 为了将Windows系统下的Java编译文件与linux服务器上的文件进行比较,故进行此文件路径的获取及路径处理。 在只有文件路径 而没有实际文件的情况下…...

JUC并发编程之线程锁(一)

目录 1.ReentrantLock(互斥锁) 2.ReentRantReaderWriterLock(互斥读写锁) 3.StampedLock(无障碍锁) 4.Condition(自定义锁) 5.LockSupport 问题引出: 由于传统的线程控制需要用到同步机制Sy…...

Android AlertDialog标题居中

网上很多做法都是使用setCustomTitle方法实现的,我偏不,因为我已经找到了标题的textView了: 在show了之后可以拿到标题(注意一定是show之后才能拿得到,create之后拿也是空的): TextView title…...

k8s界面化平台dashboard、kubesphere、Rancher对比

k8s集群管理dashboard有很多,比如kuboard、官方发dashboard、kubesphere、Rancher等等。 Dashboard、KubeSphere 和 Rancher 都是流行的 Kubernetes 管理和操作界面。它们都提供了图形化的用户界面,以简化对 Kubernetes 集群的管理和监控。每个工具都有其…...

【字符串左旋】

字符串左旋 1.题目要求 实现一个函数,可以左旋字符串中的k个字符。 例如: ABCD左旋一个字符得到BCDA ABCD左旋两个字符得到CDAB 2.解法: 设计循环使其可以旋1次,然后让他执行n次是一个最简单的思路: 函数实现&#xf…...

Docker Dirtypipe(CVE-2022-0847)漏洞复现与分析容器逃逸

安装环境 ./metarget cnv install cve-2022-0847 --verbose 原理 同脏牛,通过写只读内存,对映射的内存做篡改 EXP docker run --rm -it -v $(pwd):/exp --cap-addCAP_DAC_READ_SEARCH ubuntu如果提示 Unknown capability to add: "CAP_CAP_DAC_RE…...

python接口自动化测试框架2.0,让你像Postman一样编写测试用例,支持多环境切换、多业务依赖、数据库断言等

项目介绍 接口自动化测试项目2.0 软件架构 本框架主要是基于 Python unittest ddt HTMLTestRunner log excel mysql 企业微信通知 Jenkins 实现的接口自动化框架。 前言 公司突然要求你做自动化,但是没有代码基础不知道怎么做?或者有自动化…...

Vue.js2+Cesium1.103.0 九、淹没分析效果

Vue.js2Cesium1.103.0 九、淹没分析效果 Demo <template><divid"cesium-container"style"width: 100%; height: 100%;"><spanid"button"style"position: absolute; right: 50px; top: 50px; z-index: 999; font-size: 24px…...

SpringBoot案例-部门管理-新增

根据页面原型&#xff0c;明确需求 页面原型 需求 阅读接口文档 接口文档链接如下&#xff1a; 【腾讯文档】SpringBoot案例所需文档 https://docs.qq.com/doc/DUkRiTWVaUmFVck9N 思路分析 前端在输入要新增的部门名称后&#xff0c;会以JSON格式将数据传入至后端&#xf…...

微信小程序中背景图片如何占满整个屏幕,拉伸

不变形 1. 在页面的wxss文件中&#xff0c;设置背景图片的样式&#xff1a; page{background-image: url(图片路径);background-size: 100% 100%;background-repeat: no-repeat; }2. 在页面的json文件中&#xff0c;设置背景图片的样式&#xff1a; {"backgroundTextStyl…...

Java并发编程(四)线程同步 中 [AQS/Lock]

概述 Java中可以通过加锁&#xff0c;来保证多个线程访问某一个公共资源时&#xff0c;资源的访问安全性。Java提出了两种方式来加锁 第一种是我们上文提到的通过关键字synchronized加锁&#xff0c;synchronized底层托管给JVM执行的&#xff0c;并且在java 1.6 以后做了很多…...

PyTorch深度学习环境安装(Anaconda、CUDA、cuDNN)及关联PyCharm

1. 关系讲解 Tytorch&#xff1a;Python机器学习库&#xff0c;基于Torch&#xff0c;用于自然语言处理等应用程序 Anaconda&#xff1a;是默认的python包和环境管理工具&#xff0c;安装了anaconda&#xff0c;就默认安装了conda CUDA&#xff1a;CUDA是一种由显卡厂商NVIDI…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

Caliper 配置文件解析:config.yaml

Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

虚拟电厂发展三大趋势:市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

LRU 缓存机制详解与实现(Java版) + 力扣解决

&#x1f4cc; LRU 缓存机制详解与实现&#xff08;Java版&#xff09; 一、&#x1f4d6; 问题背景 在日常开发中&#xff0c;我们经常会使用 缓存&#xff08;Cache&#xff09; 来提升性能。但由于内存有限&#xff0c;缓存不可能无限增长&#xff0c;于是需要策略决定&am…...

Vue 模板语句的数据来源

&#x1f9e9; Vue 模板语句的数据来源&#xff1a;全方位解析 Vue 模板&#xff08;<template> 部分&#xff09;中的表达式、指令绑定&#xff08;如 v-bind, v-on&#xff09;和插值&#xff08;{{ }}&#xff09;都在一个特定的作用域内求值。这个作用域由当前 组件…...