解决 Vant 框架的 Field 组件 rules 规则错误提示语不动态改变

devtools/2024/10/21 9:54:36/

Vant 的 Field 组件可以通过 rules 属性来设置验证表单的错误提示语,当提示语显示后,再去改变的时候,发现这个提示语并没有变,
我是在切换多语言的时候发现这个问题的,
解决方法就是:给 Field 组件添加一个 key 属性,并将其绑定到一个响应式数据上。当 rules 变化时,也改变这个 key 的值。这会强制 Vue 销毁旧的组件实例并创建一个新的,从而确保所有的状态都被重置。

<template>
<Field v-model="username" name="username" label="" :placeholder="usernamePlaceholder" show-error="true" :rules="errphone" :key="fieldKey" />
</template>
<script setup>javascript">
import { ref, watch } from 'vue';
const errphone=ref([{ required: true, message: t('register.text2') }]);
const fieldKey=ref(0)
//这里监听多语言切换
watch(locale, (newVal, oldVal) => {if (newVal !== oldVal) {errphone.value=[{ required: true, message: t('register.text2') }];fieldKey.value++;}
});
</script>

http://www.ppmy.cn/devtools/18915.html

相关文章

你的网站还在使用HTTP? 免费升级至HTTPS吧

如果您的网站还在使用老的http协议&#xff0c;可以申请一个免费的SSL证书升级至https&#xff01; 具体步骤如下&#xff1a; 1 申请免费SSL证书 根据你的需求选择合适的SSL证书类型&#xff0c;如单域名证书&#xff0c;多域名证书、通配符证书 登录免费供应商JoySSL官网&…

第六十二章 IIS 7 或更高版本的替代选项 (Windows) - 替代选项 4:将 CGI 模块与 NSD 结合使用

文章目录 第六十二章 IIS 7 或更高版本的替代选项 (Windows) - 替代选项 4&#xff1a;将 CGI 模块与 NSD 结合使用替代选项 4&#xff1a;将 CGI 模块与 NSD 结合使用 (nph-CSPcgi*.exe)启用 CGI 模块 第六十二章 IIS 7 或更高版本的替代选项 (Windows) - 替代选项 4&#xff…

【问题实操】银河高级服务器操作系统实例分享,配置hugepages启动异常

1.问题现象 某运营商国产服务器操作系统项目&#xff0c;部署Kylin-Server-0524-aarch64服务器系统&#xff0c;内核从4.19.90-24.4升级到4.19.90-25.14。在grub中配置huagepages大页内存后&#xff0c;系统在内核启动阶段黑屏&#xff0c;只显示一个光标。grub配置如下图&…

阿里巴巴瓴羊基于 Flink 实时计算的优化和实践

摘要&#xff1a;本⽂整理⾃阿里云智能集团技术专家王柳焮⽼师在 Flink Forward Asia 2023 中平台建设专场的分享。内容主要为以下四部分&#xff1a; 阿里巴巴瓴羊基于 Flink 实时计算的平台演进Flink 能力优化与建设基于 Flink 的最佳实践未来规划 1. 阿里巴巴瓴羊基于 Flink…

Elasticsearch-使用bulk会掉数据?

先介绍一个参数 “cluster.routing.allocation.disk.watermark.flood_stage”&#xff1a;“95%” 这是Elasticsearch的默认参数值 官方文档&#xff08;7\8版本该参数功能相同&#xff09; https://www.elastic.co/guide/en/elasticsearch/reference/7.17/modules-cluster.htm…

STM32学习和实践笔记(22):PWM的介绍以及在STM32中的实现原理

PWM是 Pulse Width Modulation 的缩写&#xff0c;中文意思就是脉冲宽度调制&#xff0c;简称脉宽调制。它是利用微处理器的数字输出来对模拟电路进行控制的一种非常有效的技术&#xff0c;其控制简单、灵活和动态响应好等优点而成为电力电子技术最广泛应用的控制方式&#xff…

MAC系统升级问题记录

一、 场景 新购置一台MAC mini盒子作为开发使用&#xff0c;系统版本为macOS Sonoma 14.2, 由于是新机器&#xff0c;从新开始安装开发工具&#xff0c;从AppStore中获取XCode 15.3 版本&#xff0c;编译现有工程项目&#xff0c;报如下错误&#xff1a; SDK does not contai…

(超全)python图像处理详细解析(3)

图像处理 23.保存视频每一帧图像24.把png图像转换成jpg并保存25.改变图像尺寸26.改变图像比例27.旋转图像28.亮度调整29.log对数调整30.判断图像对比度31.调整强度&#xff08;1&#xff09;强度调节&#xff08;2&#xff09;uint8转float 32.绘制直方图和均衡化33.彩色图片三…