el-form重置后input无法输入问题

新增用户遇到的问题:

在这里插入图片描述

如果你没有为 formData 设置默认值,而只是将其初始化为空对象 {},则在打开dialog时,正常输入,
formdata会变成如下
在这里插入图片描述
但是,打开后,直接使用 resetFields 或直接清空表单,
formdata会变成如下:
在这里插入图片描述
Vue 使用 Object.defineProperty 实现响应式系统,而这个方法只能劫持对象在初始化时存在的属性,后添加的属性不会被自动追踪。
Vue 的响应式系统无法检测到新添加的属性,从而导致输入框无法及时更新到 DOM 上。

当 formData 被清空时,后添加的属性(password、username)不会被 Vue 的响应式系统自动追踪,这会导致输入框无法及时挂载到 DOM 上。

解决方案

  • 使用 Vue.set 方法:确保在为对象添加新属性时使用 Vue.set,以确保新属性是响应式的。
this.$set(this.formData, 'name', '');`
  • 初始化默认值:在表单数据对象中预先设置好所有可能的字段,避免在运行时动态添加属性。
formdata: {id: null,username: '',password: '',roleName: ''
},

新问题(修改用户):

<el-dialog :title="formdata.id?'修改用户':'添加用户'" :visible.sync="dialogFormVisible" @close="closedialog"><div class="upload-div"><el-form :model="formdata" ref="formdata" label-width="80px" status-icon><el-form-item class="formitem" label="用户名" prop="username"><el-input v-model="formdata.username"></el-input></el-form-item><el-form-item class="formitem" label="密码" prop="password"><el-input v-model="formdata.password"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm">提交</el-button><el-button @click="resetForm('formdata')">重置</el-button></el-form-item></el-form></div>
</el-dialog>

在这里插入图片描述

由于el-form组件进行了复用,formdata的初始值如上,在对el-table的某一行进行修改时,

changeContent (row) {this.dialogFormVisible = true;// row.password = '';this.$nextTick(() => {this.formdata = JSON.parse(JSON.stringify(row));// this.$set(this.formdata, 'password', '')})
},

formdata重新赋值变成了
在这里插入图片描述
这就导致了在重置时,由于formdata的初始值设置中是有password,所以在重置后,formdata的结构如下
在这里插入图片描述

在打开dialog直接点击重置后,我们再往password的input中输入,发现会无法输入,这是因为此时password不具有响应式,是新添加的属性。
如果打开dialog后,正常操作,则不会有上述问题。在输入password后password才会加入formdata,并变成响应式。

解决办法:
 // 第一种方式:row.password = '';
this.$nextTick(() => {this.formdata = JSON.parse(JSON.stringify(row));console.log("formdata", this.formdata);// 第二种方式:this.$set(this.formdata, 'password', '')
})

这两种方式都能将password变为响应式的。

重置是在重置前的formdata的基础上进行的,重置前的formdata与初始化进行比较,将初始化的属性和属性值赋值到现在的formdata中,而方法不会赋值过来,这也就是password为什么没有响应式的原因。
并且重置只会将在el-form中展示的属性进行重置,对上面的el-form进行重置,发现id和roleName并没有重置到初始状态,这是因为这两个属性并没有设置prop和v-model绑定。
在这里插入图片描述

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

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

相关文章

宜搭低代码开发高级认证例题1-待办列表

1、进行中待办和已完成待办界面相同 关键代码就是重要度默认为1星 2、新增自定义页面Todolist 2.1主要参数设置-新建远和API getTodoList和getDoneList代码相同 绑定代码&#xff1a;/${window.pageConfig.appType || window.g_config.appKey}/v1/form/searchFormDatas.json …

福州代理记账服务财务专业知识会计助手

福州的代理记服务可探索企业和个体工商户处理财务和会计工作。选择合适的代理记服务不仅可以节省成本&#xff0c;还可以确保财务工作专业、合规。以下是一些关于代理记服务的关键信息和财务信息&#xff0c;供您参考&#xff1a; https://www.9733.cn/news/detail/180.html …

C++ ─── vector的实现

知识点&#xff1a; ① 因为vector是模版&#xff0c;所以声明和定义都放在.h中&#xff0c;防止出现编译错误 .h不会被编译&#xff0c;在预处理中.h在.cpp中展开所以在编译时只有.cpp 而 .cpp顺序编译&#xff0c;只会进行向上查找&#xff0c;因此至少有函数的声明。 ②memc…

【数据结构与算法】堆排序算法 详解

堆排序算法 Status heapAdjust(ElemType *a, int s, int m) {ElemType t a[s];for (int j s * 2 1; j < m; j j * 2 1) {if (j < m && a[j] < a[j 1]) {j;}if (t > a[j]) {break;}a[s] a[j];s j;}a[s] t;return OK; }Status heapSort(ElemType *a…

xhs 旋转验证码剖析和协议算法实现

【作者主页】&#xff1a;小鱼神1024 【擅长领域】&#xff1a;JS逆向、小程序逆向、AST还原、验证码突防、Python开发、浏览器插件开发、React前端开发、NestJS后端开发等等 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;不提供完整代码&#…

计算机视觉的职业规划

Hi&#xff0c;大家好。我是茶桁。 今天这节课呢&#xff0c;咱们先不着急讲原理&#xff0c;先来讲讲职业规划的话题。 如果想要直接上手企业级的 AI 项目&#xff0c;可以看看咱们的「AI 人工智能企业项目实战」。 趋势和薪资 首先&#xff0c;先来讲讲就业的趋势。其实学…

JavaWeb——MySQL:DDL

目录 3. DQL:查询 ​编辑3.3 排序查询&#xff08;order by&#xff09; &#xff08;1&#xff09;排序 &#xff08;2&#xff09;多字段排序&#xff1a; &#xff08;3&#xff09;总结&#xff1a; 3. DQL:查询 查询是使用最多、最频繁的操作&#xff0c;因为前面的…

开心汉化轻量级工单与知识库一体化管理系统源码

开心汉化发布&#xff1a;轻量级工单与知识库一体化管理系统源码 我们很高兴地宣布&#xff0c;开心汉化团队现已发布一款轻量级工单与知识库一体化管理系统的汉化源码。该系统不仅功能强大&#xff0c;而且易于部署和管理&#xff0c;适用于各类企业或个人管理大量工单数据的…

微软结束将数据中心置于海底的实验

2016 年&#xff0c;微软 宣布了一项名为"纳蒂克项目"&#xff08;Project Natick&#xff09;的实验。基本而言&#xff0c;该项目旨在了解数据中心能否在海洋水下安装和运行。经过多次较小规模的测试运行后&#xff0c;该公司于 2018 年春季在苏格兰海岸外 117 英尺…

密码学及其应用 —— Java中的安全性

1. 简介 Java是一种广泛使用的编程语言&#xff0c;特别是在企业级解决方案中&#xff0c;比如使用J2EE、JavaBeans等技术。在Web开发领域&#xff0c;Java也有其应用&#xff0c;如客户端的applet和服务器端的Servlets/JSP。 1.1 Java的特点 面向对象&#xff1a;Java是一种面…

【个人博客搭建】(26)发布后端webapi项目

1、选择启动的webapi&#xff0c;右击发布 2、选择左下角的“显示所有设置” 在上一页按钮那边是发布文件夹的目录 地址&#xff0c; 现在界面的就是配置的信息&#xff0c; 配置&#xff1a;Debug、Release 目标框架&#xff1a;我们用的net8.0&#xff0c;就是他&#xff…

FPGA学习笔记(5)——硬件调试与使用内置的集成逻辑分析仪(ILA)IP核

如果要对信号进行分析&#xff0c;可以使用外置的逻辑分析仪&#xff0c;但成本较高&#xff0c;对初学者来说没有必要&#xff0c;可以使用Xilinx Vivado内自带的逻辑分析仪IP核对信号进行分析&#xff0c;不过需要占用一定的芯片资源。 本节采用上一节配置的LED灯闪烁代码&a…

学习记录697@数据通信基础之异步通信和同步通信

最近在看计算机网络物理层部分&#xff0c;涉及到异步通信和同步通信&#xff0c;这个和通信知识相关。 异步通信和同步通信都是为了解决时钟同步问题&#xff0c;这个和编程中的同步和异步是不一样的概念。 时钟同步 我的理解是&#xff0c;发送者发送一系列信号&#xff0…

手机定位技术全解析:原理、发展与应用

1. 引言 背景介绍 最近&#xff0c;神仙姐姐刘亦菲主演的电视剧《玫瑰的故事》中的一段情节引发了广泛讨论。剧中&#xff0c;方协文&#xff08;丈夫&#xff09;对玫瑰&#xff08;妻子&#xff09;的控制欲变本加厉&#xff0c;竟然偷偷在她的手机上安装监控软件&#xff…

python笔记3

1.通过乘法多次打印&#xff0c;以及字符串相加的合体打印 xzzz yyyy print(xy) print(x*10)#与一个数为打印多少次 2.设置俩个变量&#xff0c;可以通过下面的方法来判断是否一个元素是否在另一个元素中&#xff0c;返回bool值 xzzz yyyy print(xy) print(x*10)#与一个数为打…

Android app Java层异常捕获方案

背景&#xff1a; 在Android app运行中&#xff0c;有时一些无关紧要的异常出现时希望App 不崩溃&#xff0c;能继续让用户操作&#xff0c;可以有效提升用户体验和增加业务价值。 新流程&#xff1a; 哪些场景需要Catch Crash Config配置信息&#xff1a; 支持从网络上获…

PPT录屏怎么录?PPT录屏,3种方法简单操作

在数字化时代&#xff0c;PPT已经成为我们日常工作、学习和生活中不可或缺的一部分。无论是商务报告、教学课件还是产品展示&#xff0c;PPT都能帮助我们更加生动、直观地传递信息。然而&#xff0c;有时候我们会面临PPT录屏怎么录的问题。这时&#xff0c;一个好的PPT录屏功能…

合同与合规管理:国企数字化转型之路

在全球经济一体化的背景下&#xff0c;国有企业作为国家经济的重要支撑&#xff0c;其稳健的操作和高效的管理备受瞩目。随着市场经济条件的不断演变和法规的日益严格&#xff0c;传统的手动处理合同和合规管理方式已逐步显示出局限性。采纳先进的合同管理系统和合规管理系统从…

【C++11(二)】lambda表达式和可变参数模板

一、可变参数模板 C11的新特性可变参数模板 能够让您创建可以接受 可变参数的函数模板和类模板 // Args是一个模板参数包&#xff0c;args是一个函数形参参数包 // 声明一个参数包Args...args&#xff0c;这个参数包中可以包含0到任意个模板参数。 template <class ...Arg…

科普文:贝叶斯过滤器判定垃圾邮件

简介 贝叶斯分类的运作是借着使用标记(一般是字词&#xff0c;有时候是其他)与垃圾邮件、非垃圾邮件的关连&#xff0c;然后搭配贝叶斯推断来计算一封邮件为垃圾邮件的可能性。 贝叶斯垃圾邮件过滤是非常有威力的技术&#xff0c;可以修改自己以符合个别使用者的需要&#xff0…