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

embedded/2024/10/21 10:03:40/

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/embedded/25268.html

相关文章

ElasticSearch总结1

目录 一、ElasticSearch介绍&#xff1a; 举例一&#xff1a; 举例二&#xff1a; 举例三&#xff1a; 二、ELK技术栈 三、Elasticsearch 的基本概念&#xff1a; 四、正向索引和倒排索引&#xff1a; 正向索引&#xff1a; 倒排索引&#xff1a; 五、Mysql和Elastics…

LeetCode 727. 菱形

输入一个奇数 n n n&#xff0c;输出一个由 * 构成的 n n n阶实心菱形。 输入格式 一个奇数 n n n。 输出格式 输出一个由 * 构成的 n n n阶实心菱形。 具体格式参照输出样例。 数据范围 1 ≤ n ≤ 99 1≤n≤99 1≤n≤99 输入样例&#xff1a; 5输出样例&#xff1a; *…

JDK 动态代理和 CGLIB 动态代理对比

大家好&#xff0c;今天我要和大家聊聊Java编程中两个重要的概念——JDK动态代理和CGLIB动态代理。了解并熟练掌握这两种代理技术&#xff0c;对于提升代码的可维护性、可扩展性以及性能优化都至关重要。那么&#xff0c;这两种代理方式有何异同&#xff1f;各自适用于什么场景…

DVWA靶场

DVWA是指Damn Vulnerable Web Application&#xff0c;是一个用于教育和训练网络安全人员的虚拟漏洞应用程序。DVWA模拟了一个包含了多种常见Web安全漏洞的虚拟环境&#xff0c;包括SQL注入、XSS攻击、CSRF攻击等等。通过使用DVWA&#xff0c;安全人员可以学习和实践各种Web安全…

react-mosaic-component-一个React库--窗格布局

import { Mosaic, MosaicWindow, MosaicZeroState } from "react-mosaic-component";从名为react-mosaic-component的npm包中引入三个组件&#xff1a;Mosaic&#xff0c;MosaicWindow和MosaicZeroState。 react-mosaic-component是一个React库&#xff0c;用于创建…

前端如何将接口传来的列表数据(数组)直接下载成csv文件

前言&#xff1a;最近遇到一个需求&#xff0c;需要实现一个下载表格数据的操作&#xff0c;一般来说是前端请求后端的下载接口&#xff0c;将文件流下载下来&#xff0c;但是因为这个项目任务时间比较紧&#xff0c;后端没时间做下载接口&#xff0c;所以暂时由前端直接调列表…

Go 语言变量

变量来源于数学&#xff0c;是计算机语言中能储存计算结果或能表示值抽象概念。 变量可以通过变量名访问。 Go 语言变量名由字母、数字、下划线组成&#xff0c;其中首个字符不能为数字。 声明变量的一般形式是使用 var 关键字&#xff1a; var identifier type 可以一次声…

XML OR MYsql 报错:Could not create connection to database server.

mybaits文件少复制了一个部分&#xff0c;或缺少部分&#xff1a; 添加至表头即可解决 代码&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <!DOCTYPE configuration SYSTEM "http://mybatis.org/dtd/mybatis-3-config.dtd" &g…