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

Vue3 | Element Plus resetFields不生效

Vue3 | Element Plus resetFields不生效

1. 简介

先打开创建对话框没有问题,但只要先打开编辑对话框,后续在打开对话框就会有默认值,还无法使用resetFields()重置。
下面是用来复现问题的示例代码和示例GIF。

<script setup>
import {ref} from 'vue'const formRef = ref(null)
const dialogFormVisible = ref(false)
const title = ref('')
const formData = ref({username: null,password: null,
})const createDialog = () => {title.value = '创建'dialogFormVisible.value = true
}const resetDialog = () => {formRef.value.resetFields()
}const editDialog = () => {title.value = '编辑'// 模拟待编辑数据let user = {'username': 'yimtcode','password': '123456'}Object.assign(formData.value, user)dialogFormVisible.value = true
}const closeDialog = () => {formRef.value.resetFields()dialogFormVisible.value = false
}
</script><template><el-dialog :title="title" v-model="dialogFormVisible" :before-close="closeDialog"><el-form ref="formRef" :model="formData"><el-form-item label="username" prop="username"><el-input v-model="formData.username" autocomplete="off"></el-input></el-form-item><el-form-item label="password" prop="password"><el-input v-model="formData.password" autocomplete="off"></el-input></el-form-item></el-form><template #footer><span class="dialog-footer"><el-button @click="resetDialog">reset</el-button><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="dialogFormVisible = false">确 定</el-button></span></template></el-dialog><el-button @click="createDialog">create</el-button><el-button @click="editDialog">edit</el-button>
</template><style scoped>
</style>

movie

2. 原因

前置知识:el-form会记录第一次打开的值,当作表单的默认值。在后续调用resetFields会将当前绑定的数据对象设置为el-form默认值。

  1. editDialog
    1. title.value = '编辑'
    2. Object.assign(formData.value, user)
    3. dialogFormVisible.value = true:⭐️注意此时el-form将第一次打开的formValue值当成默认值也就是user对象的值。
  2. closeDialog
    1. formRef.value.resetFields():⭐️此处重置是有问题,会将当前formData值重置为user对象的值,因为当前el-form默认值在上面已经变成了user
    2. dialogFormVisible.value = falseu
  3. createDialog打开对话框时,el-form就会将上面user当成默认值。

3. 解决方法

  1. 先让编辑对话框显示,完成el-form初始化,防止将当前user信息当成默认值,影响createDialog
  2. 在下一个DOM更新,在把数据更新上已经显示的对话框。
const editDialog = () => {title.value = '编辑'dialogFormVisible.value = truenextTick(() => {// 模拟待编辑数据let user = {'username': 'yimtcode','password': '123456'}Object.assign(formData.value, user)})
}

4. 参考

  • resetFields重置初始值不生效的原因

相关文章:

Vue3 | Element Plus resetFields不生效

Vue3 | Element Plus resetFields不生效 1. 简介 先打开创建对话框没有问题&#xff0c;但只要先打开编辑对话框&#xff0c;后续在打开对话框就会有默认值&#xff0c;还无法使用resetFields()重置。 下面是用来复现问题的示例代码和示例GIF。 <script setup> import…...

机器视觉特点 机器视觉实际应用

机器视觉特点 1、机器视觉是一项综合技术&#xff0c;其中包括数字图像处理技术&#xff0c;机械工程技术&#xff0c;控制技术&#xff0c;电光源照明技术&#xff0c;光学成像技术&#xff0c;传感器技术&#xff0c;模拟与数字视频技术&#xff0c;计算机硬件技术&#xff…...

elementui大型表单校验

一般很大的表单都会被拆解开&#xff0c;校验&#xff0c;&#xff0c;不会写在一个页面&#xff0c;&#xff0c;就会有多个 el-form &#xff0c;&#xff0c;主页要集合所有el-form的数据&#xff0c;&#xff0c;所以有一个map来接收&#xff0c;传送表单数据&#xff0c;&…...

Linux+Selenium

SeleniumLinux 开源社区已无CentOS7.0以下rpm维护。升级测试机器到CentOS7.X。 Selenium安装 python环境&#xff1a;pip3 install selenium 浏览器插件&#xff1a;http://chromedriver.storage.googleapis.com/index.html yum instlal google-chrome 使用以下命令确定是…...

2023-06-01 LeetCode每日一题(礼盒的最大甜蜜度)

2023-03-29每日一题 一、题目编号 二、题目链接 点击跳转到题目位置 三、题目描述 给你一个正整数数组 price &#xff0c;其中 price[i] 表示第 i 类糖果的价格&#xff0c;另给你一个正整数 k 。 商店组合 k 类 不同 糖果打包成礼盒出售。礼盒的 甜蜜度 是礼盒中任意两…...

Spring架构篇--2.7.2 远程通信基础--Netty原理--ServerBootstrap

前言&#xff1a;已经初始化了NioEventLoopGroup 的boosGroup 和 workerGroup &#xff0c;那么ServerBootstrap的作用是干嘛的呢 &#xff0c;本文在Spring架构篇–2.7.1 远程通信基础–Netty原理–NioEventLoopGroup 之后继续进行探究 1 首先回顾下 nettt 的使用demo&#x…...

awk编辑器

文章目录 一.awk概述1.概述2.作用3.awk的工作过程4.awk 工作原理及命令格式5.awk的基本操作及其内置变量5.1 awk的-F操作5.2 awk的-v操作5.3 内置变量 二.awk 打印1.基本打印用法1.1 默认打印1.2打印文件内容 2.对行进行操作2.1 只打印行号&#xff08;有多少行&#xff09;2.2…...

DicomObjects.Core 3.0.17 Crack

DicomObjects.NET 核心版简介 DicomObjects.Core Assembly DicomObjects.NET 核心版简介 DicomObjects.Core 由一组相互关联但独立的 .核心兼容的“对象”&#xff0c;使开发人员能够快速轻松地将DICOM功能添加到其产品中&#xff0c;而无需了解或编程DICOM标准的复杂性。此帮助…...

电脑怎么通过网络传输文件?

可以通过网络在电脑之间传输文件吗&#xff1f; “由于天气的原因&#xff0c;我的老板决定让所有员工在家工作。但是我很多工作文件都在公司的电脑中&#xff0c;怎么才能将公司的文件远程传输到我家里的电脑上&#xff1f;电脑可以通过网络远程传输文件吗&#xff1f;” …...

人工智能之深度学习

第一章 人工智能概述 1.1人工智能的概念和历史 1.2人工智能的发展趋势和挑战 1.3人工智能的伦理和社会问题 第二章 数学基础 1.1线性代数 1.2概率与统计 1.3微积分 第三章 监督学习 1.1无监督学习 1.2半监督学习 1.3增强学习 第四章 深度学习 1.1神经网络的基本原理 1.2深度…...

性能测试设计阶段

性能测试设计阶段 性能测试是软件测试中的关键环节&#xff0c;它可以帮助我们评估软件系统在压力下的运行稳定性和性能表现。性能测试设计阶段是性能测试的基础&#xff0c;只有经过充分的设计&#xff0c;才能保证性能测试的有效性和准确性。 在性能测试设计阶段&#xff0c;…...

leetCode !! word break

方法一&#xff1a;字典树动态规划 首先,创建node类&#xff0c;每个对象应该包含:一个node array nexts(如果有通往’a’的路&#xff0c;那么对应的nexts[0]就不该为null); 一个boolean 变量&#xff08;如果到达的这个字母恰好是字典中某个候选串的结尾&#xff0c;那么 标记…...

基础学习——关于list、numpy、torch在float和int等数据类型转换方面的总结

系列文章目录 Numpy学习——创建数组及常规操作&#xff08;数组创建、切片、维度变换、索引、筛选、判断、广播&#xff09; Tensor学习——创建张量及常规操作&#xff08;创建、切片、索引、转换、维度变换、拼接&#xff09; 基础学习——numpy与tensor张量的转换 基础学习…...

华纳云美国Linux服务器常用命令分享

美国Linux服务器系统目前也是跟Windows操作系统一样用户量非常多&#xff0c;其简单的纯命令操作模式可以节省很多系统空间&#xff0c;本文小编就来分享一些美国Linux服务器系统常用的命令&#xff0c;希望能够给刚入门的美国Linux服务器系统的用户提供一些操作参考。 1、系统…...

【minio】8.x版本与SpringBoot版本不兼容报错

错误异常&#xff1a; <minio.version>8.4.3</minio.version><spring-boot.version>2.6.13</spring-boot.version>Description:An attempt was made to call a method that does not exist. The attempt was made from the following location:io.min…...

如何用chatGPT赚钱?

赚钱思路 1&#xff09;初级-账号 对于新事物的出现&#xff0c;很多人对此都是抱着一个看热闹的态度&#xff0c;大家对于这个东西的整体认知水平是很低的&#xff01; 所以这个时候的思路就是快速去抢占市场&#xff0c;去各个平台发一些和ChatGPT相关的视频和文章去抢占市…...

【Go编程语言】流程控制

流程控制 文章目录 流程控制一、if 语句1.if 嵌套语句 二、switch 语句三、for 循环四、string 程序的流程控制结构一具有三种&#xff1a;顺序结构&#xff0c;选择结构&#xff0c;循环结构 顺序结构&#xff1a;从上到下&#xff0c;逐行执行。默认的逻辑 选择结构&#xf…...

Sql Server 自动备份

Sql Server 自动备份 文章目录 Sql Server 自动备份1. 打开SQL Server&#xff0c;在管理下找到”维护计划”&#xff0c;右键点击”维护计划向导”&#xff0c;如图&#xff1b;2. 再次点击维护计划向导3. 在选择维护任务下勾选”备份数据库”、”清楚维护任务”4.选择需要备份…...

ThreadLocal的应用

1. ThreadLocal 是什么 JDK 对ThreadLocal的描述为&#xff1a; 此类提供线程局部变量。这些变量与普通变量的不同之处在于&#xff0c;每个访问一个变量的线程&#xff08;通过其get或set方法&#xff09;都有自己的、独立初始化的变量副本。ThreadLocal 实例通常是类中的私有…...

中值滤波_中值滤波原理

均值滤波是典型的线性滤波算法,它是指在图像上对目标像素给一个模板,该模板包括了其周围的临近像素(以目标象素为中心的周围8个象素,构成一个滤波模板,即去掉目标象素本身).再用模板中的全体像素的平均值来代替原来像素值.均值滤波也称为线性滤波,其采用的主要方法为领域平均法…...

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

安卓基础(aar)

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

嵌入式常见 CPU 架构

架构类型架构厂商芯片厂商典型芯片特点与应用场景PICRISC (8/16 位)MicrochipMicrochipPIC16F877A、PIC18F4550简化指令集&#xff0c;单周期执行&#xff1b;低功耗、CIP 独立外设&#xff1b;用于家电、小电机控制、安防面板等嵌入式场景8051CISC (8 位)Intel&#xff08;原始…...