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.rhkb.cn/news/360205.html

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

相关文章

mybatis x插件的使用教程(详细)

MyBatisX 的主要功能 代码生成&#xff1a; 自动生成 MyBatis 的 Mapper、XML 配置文件和实体类&#xff0c;大大减少手工编写代码的工作量。 智能代码补全&#xff1a; 提供 SQL 语句和 MyBatis 配置的智能代码补全功能&#xff0c;使开发者能够更快地编写代码。 代码导航&…

用Jenkins+Docker+Maven+Git实现持续集成 (超详细)

首先介绍一下笔者的练手小项目&#xff1a;基于SpringCloud搭建的&#xff0c;用Docker容器部署&#xff0c;用Git实现代码托管&#xff0c;Jenkins实现持续集成。 好了&#xff0c;废话不多说了&#xff0c;直接进入主题吧。 一、Jenkins简介 Jenkins&#xff0c;原名Hudson&…

重磅丨上海容大推出“容聆”智能拾音工牌,赋能线下门店运营数字化

近日&#xff0c;继豚音营业厅智能质检终端之后&#xff0c;上海容大数字技术有限公司&#xff08;简称“上海容大”&#xff09;在线下面对面沟通场景下语音数据采集与智能分析领域取得了新突破&#xff0c;重磅推出AI智能语音工牌产品——“容聆”。 据悉&#xff0c;“容聆”…

【期末复习】计算机组成原理

海明码 最通俗的海明码计算方法&#xff0c;不需记公式&#xff0c;套步骤即可&#xff08;可能都不需要理解&#xff09; https://www.bilibili.com/video/BV1tL4y1h7Fd/ 接上一海明码视频&#xff08;海明码的纠错&#xff09; https://www.bilibili.com/video/BV1tf4y1A7NX/…

[保姆级教程]uniapp实现底部导航栏

文章目录 前置准备工作安装HBuilder-X新建uniapp项目教程使用HBuilder-X启动uniapp项目教程 实现底部导航栏package.json中配置导航栏详细配置内容 前置准备工作 安装HBuilder-X 详细步骤可看上文》》 新建uniapp项目教程 详细步骤可看上文》》 使用HBuilder-X启动uniapp项…

ElementUI框架搭建及组件使用+登录界面精美模版分享

目录 如何在项目中使用ElementUI组件&#xff1f; ① 通过npm 安装 ② 完整引入 Element ③ 导入组件测试 登录界面搭建 注意事项 ▐ 前言&#xff1a; 本篇文章将详解基于Vue-cli脚手架搭建的项目如何使用ElementUI &#xff1f;所以在学习本篇文章内容之前建议您先学习…

【ajax核心01】ajax底层原理

目录 一:XMLHttpRequest对象 二&#xff1a;如何使用XHR 步骤&#xff1a; 注意&#xff1a; 三&#xff1a;XMLHttpRequest-请求参数 1 定义&#xff1a; 2 案例练习 前端HTML结构&#xff1a; JS代码 四&#xff1a;XMLHttpRequest-数据提交 核心 五&#xff1a;如…

实现一个查找算法

/实现一个查找算法 public class Test_35 {public static int linearSearch(int[] arr, int target) {for (int i 0; i < arr.length; i) {if (arr[i] target) {return i; // 返回目标元素的索引}}return -1; // 如果未找到目标元素&#xff0c;则返回-1}public static vo…

Spring Boot基础入门

引言 Spring Boot是一个开源的Java框架&#xff0c;旨在简化Spring应用程序的创建和部署过程。它提供了一种快速和简便的方式来创建独立的、生产级别的基于Spring的应用程序。本文将介绍Spring Boot的基础知识&#xff0c;包括其核心特性、如何开始使用Spring Boot以及构建你的…

百度大模型安全荣获2024世界智能产业博览会“Find智能科技创新应用典型案例”

6月20日&#xff0c;2024世界智能产业博览会在天津开幕。会议聚焦人工智能、智能网联汽车、智能制造等年度热点议题&#xff0c;由世界智能产业博览会组委会指导&#xff0c;世界智能产业博览会组委会秘书处、中国新一代人工智能战略发展研究院、中国软件行业协会、中国网络空间…

swp添加池子addLiquidity失败

案发现场 首次添加交易对、一直失败、但是也没提示具体的原因。到这一步就没了、由下图可知、也没看到log、由此可见第一步就失败了。 解决方案 一、添加 工厂KywFactory 添加如下 bytes32 public constant INIT_CODE_PAIR_HASH keccak256(abi.encodePacked(type(KywPair…

土耳其-加拉太塔

加拉太塔&#xff08;Galata Tower&#xff09;是位于土耳其-伊斯坦布尔的一个著名地标&#xff0c;它提供了城市的壮丽全景。如果有计划前往这座塔楼打卡的话&#xff0c;可以先了解下这座历史悠久的塔楼&#xff0c;让自己感兴趣&#xff0c;才能体会到它的独特之处&#xff…

Web渗透-XSS漏洞深入及xss-labs靶场实战

一、简介 xss全称&#xff08;cross site scripting)跨站脚本攻击&#xff0c;是最常见的web应用程序安全漏洞之一&#xff0c;位于owasptop102013年度第三名xss是指攻击者在网页中嵌入客户端脚本&#xff0c;通常是javascrip编写的危险代码&#xff0c;当用户使用浏览网页时&…

excel数据透视

Excel中&#xff0c;数据透视图&#xff08;PivotChart&#xff09;和数据透视表&#xff08;PivotTable&#xff09;是两个紧密相关的工具&#xff0c;用于分析数据。数据透视表是数据透视图的数据源&#xff0c;也就是说&#xff0c;数据透视图是基于数据透视表中的数据创建的…

周末设计高端企业_集团官网主题Discuz模板

风格名称: 周末设计_高端企业_集团官网 适用版本: Discuz! X3.0、X3.1、X3.2、X3.3、F1.0 风格编码: 使用语言包结构&#xff0c;适合全部编码 周末设计高端企业_集团官网主题Discuz模板

防止多次点击,vue的按钮上做简易的防抖节流处理

话不多说,上个视频,看看是不是你要的效果 防抖节流 1.创建一个directive.js // directive.js export default {install(Vue) {// 防重复点击(指令实现)Vue.directive(repeatClick, {inserted(el, binding) {el.addEventListener(click, () > {if (!el.disabled) {el.disabl…

我对ChatGPT-5的期待

在科技飞速发展的今天&#xff0c;人工智能&#xff08;AI&#xff09;已经成为我们生活中不可或缺的一部分。尤其是近年来&#xff0c;随着ChatGPT等先进AI模型的推出&#xff0c;我们见证了AI技术在智能水平上的巨大飞跃。作为这一领域的最新成果&#xff0c;GPT-5的即将发布…

电脑开机后出现Aptio Setup Utility 处理方法

电脑开机后出现Aptio Setup Utility怎么处理 Aptio Setup Utility界面的原因&#xff1a; 这是由于 bios设置与真实的硬件情况不匹配硬盘故障找不到可启动的硬盘情况 我的问题是找不到可启动的硬盘情况 解决方式如下&#xff1a; 进入如下界面了&#xff0c;选择Boot选项…

yolov10--C#接口

一、前言 本章主要讲解yolov10的C#接口&#xff0c;主要是使用微软开发的openvinocsharp工具加载yolov10模型&#xff0c;并做推理。 二、yolov10模型转换 这里为了演示&#xff0c;使用官方yolov10m模型&#xff08;其他大小的模型同理&#xff09;做演示&#xff0c;可从下方…

动态规划数字三角形模型——AcWing 275. 传纸条

动态规划数字三角形模型 定义 动态规划数字三角形模型是在一个三角形的数阵中&#xff0c;通过一定规则找到从顶部到底部的最优路径或最优值。 运用情况 通常用于解决具有递推关系、需要在不同路径中做出选择以达到最优结果的问题。比如计算最短路径、最大和等。 计算其他…