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

news2024/10/6 8:26:17

新增用户遇到的问题:

在这里插入图片描述

如果你没有为 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为什么没有响应式的原因。

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

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

相关文章

封装vuetify3中v-time-picker组件,并解决使用时分秒类型只能在修改秒之后v-model才会同步更新的问题

目前时间组件还属于实验室组件&#xff0c;要使用需要单独引入&#xff0c;具体使用方式查看官网 创建公共时间选择器组件 common-time-pickers.vue 子组件页面 <template><div><v-dialog v-model"props.timeItem.isShow" activator"parent&q…

vxe-list做列表虚拟滚动时,底部间距的优化

已知vxe-list在数据超出一定行时会自动启用纵向虚拟滚动配置&#xff0c;默认效果如图&#xff1a; 但是在滚动中我们发现有时列表底部间距不一致&#xff0c;而且会出现在感官上底部空白过多的情况&#xff1a; 这时候我们想让列表恰好显示完全应该怎么做呢&#xff0c;查看官…

DLS平台:GPT-5预计于2025年底至2026年初发布,将实现“博士水平”智能

摘要 OpenAI首席技术官Mira Murati近日透露&#xff0c;GPT-5可能推迟到2025年底或2026年初发布。这一消息打破了市场对GPT-5在2023年底或2024年夏季发布的预期。尽管推迟&#xff0c;但GPT-5将实现显著的性能飞跃&#xff0c;在特定任务中达到“博士水平”的智能。这标志着人…

.NET开源的实时应用监控系统 - WatchDog

项目介绍 WatchDog是一个开源&#xff08;MIT License&#xff09;、免费、针对ASP.Net Core Web应用程序和API的实时应用监控系统。开发者可以实时记录和查看他们的应用程序中的消息、事件、HTTP请求和响应&#xff0c;以及运行时捕获的异常。 项目工作原理 它利用SignalR进…

jupyter中如何看plt.plot的局部细节

在Jupyter中使用matplotlib时&#xff0c;如果你想要放大图表的某一部分&#xff0c;可以使用matplotlib的交互式方式查看局部细节。 %matplotlib notebook # 在Jupyter中使用交互式后端 import matplotlib.pyplot as plt import numpy as np# 生成数据 x np.linspace(0, 10…

C# 信号量的使用

学习来源&#xff1a;《.net core 底层入门》 第六章第9节&#xff1a;信号量 案例&#xff1a;主线程负责添加数据&#xff0c;子线程负责获取数据 使用SemaphoreSlim&#xff08;轻信号量&#xff09;实现&#xff1a; using System; using System.Collections.Generic; us…

Openldap安装部署及Gitea简单配置使用

Openldap安装部署及Gitea简单配置使用 一.安装Openldap #拉取镜像 docker pull osixia/openldap:latestdocker run \ -d \ -p 389:389 \ -p 636:636 \ -v /home/data/openldap/local:/usr/local/ldap \ -v /home/data/openldap/lib:/var/lib/ldap \ -v /home/data/openldap/s…

Python 3.12 环境搭建(Windows版)

目录 1. 下载Python 3.12安装包2. 安装Python 3.123. 验证安装5. &#xff08;可选&#xff09;配置其他开发工具 在Windows系统中搭建Python 3.11环境&#xff0c;可以按照以下步骤进行&#xff0c;以确保过程清晰且详细&#xff1a; 1. 下载Python 3.12安装包 打开浏览器&a…

【Docker】Consul 和API

目录 一、Consul 1. 拉取镜像 2. 启动第一个consul服务&#xff1a;consul1 3. 查看consul service1 的ip地址 4. 启动第二个consul服务&#xff1a;consul2&#xff0c; 并加入consul1&#xff08;使用join命令&#xff09; 5. 启动第三个consul服务&#xff1a;consul3&…

Games101 正交投影矩阵推导

目录 正交投影 投影矩阵推导 正交投影 正交投影不管是远处还是近处&#xff0c;都是直接挤在屏幕上就好&#xff0c;它没有近大远小的效果 首先&#xff0c;把相机放在原点上&#xff0c;往-z方向看&#xff0c;上方向是y&#xff1b; 这样摆放相机的好处是&#xff0c;把…

前端HTML/CSS知识点系列

1. 什么是块级格式化上下文&#xff1f;【BFC(Block formatting context)】 BFC&#xff08;Block FormattingContext&#xff0c;块级格式化上下文&#xff09;是一个独立的渲染区域&#xff0c;其中的元素的布局不会受到外部元素的影响&#xff0c;反之亦然。BFC的创建有助于…

深度学习工具|LabelImg(标注工具)的安装与使用教程

1 简介 Label是一款免费的图像标注软件&#xff0c;可以以矩形框的形式对图像中的物体进行标记&#xff0c;常用于分类和目标检测。并可以将标记信息保存为PasclVOC&#xff08;xml&#xff09;、YOLO&#xff08;txt&#xff09;、CreateML&#xff08;json&#xff09;格式。…

《编译原理》阅读笔记:p18

《编译原理》学习第 3 天&#xff0c;p18总结&#xff0c;总计 14页。 一、技术总结 1.assembler (1)计算机结构 要想学习汇编的时候更好的理解&#xff0c;要先了解计算机的结构&#xff0c;以下是本人学习汇编时总结的一张图&#xff0c;每当学习汇编时&#xff0c;看到“…

JavaWeb系列七: 动态WEB开发核心(Servlet) 下

韩老师学生 ServletConfigServletContext网站计数器 HttpServletRequest细节1细节2细节3 Dispathcer请求转发应用实例请求转发细节和注意事项习题 HttpServletResponse请求重定向请求重定向注意事项动态获取到application context练习题 ServletConfig ●ServletConfig基本介绍…

Docker--基础详解

目录 Docker介绍 Docker与传统虚拟机相比的优势 Docker基础插件 Docker镜像 容器和仓库 Docker介绍 Docker 是一个开源的应用容器引擎&#xff0c;基于 Go 语言开发&#xff0c;遵从Apache2.0开源协议&#xff0c;依赖Linux内核的Cgroup和Namespace等技术&#xff0c;对进…

智启万象|2024 Google 谷歌开发者大会报名开启!

邀你 8 月 7 日 - 8 日齐聚北京 共同探索 Google 最新的开发者工具与技术 助力高效创新&#xff0c;释放无限潜能 想要抢先一步找到官方剧透&#xff1f; 点击下方卡片 解锁大会更多精彩内容 ↓ 看到这里&#xff0c;是不是开始期待来到现场了呢&#xff1f; 更多亮点不容错过 …

快速清理Word中的嵌套表格

实例需求&#xff1a;Word文档中表格有的单元格中包含嵌套表格&#xff08;注意其中表格中有合并单元格&#xff09;&#xff0c;如下图所示。 现在需要删除单元格顶部的嵌套表格&#xff08;如上图中的表格1和表格3&#xff09;&#xff0c;如下图所示&#xff0c;如果表格较多…

Docker部署私有仓库(registryHarbor)

简介Docker Hub 官方仓库 在 Docker 中&#xff0c;当我们执行 docker pull xxx 的时候 &#xff0c;它实际上是从 registry.hub.docker.com 这个地址去查找&#xff0c;这就是Docker公司为我们提供的公共仓库。在工作中&#xff0c;我们不可能把企业项目push到公有仓库进行管理…

【机器学习项目实战(二)】基于朴素贝叶斯的中文垃圾短信分类

完整代码、数据集和相应的报告 链接已经放在了正文最下方, 供大家参考学习 摘要 ​ 本文探讨了中文垃圾短信分类的问题,通过收集实际数据集,运用多种机器学习算法进行分类,并对比了不同算法在垃圾短信分类任务上的性能。本研究旨在提高中文垃圾短信的识别准确率,为构建更…

【KMP 滚动哈希】1392. 最长快乐前缀

本文涉及知识点 KMP 滚动哈希 LeetCode1392. 最长快乐前缀 「快乐前缀」 是在原字符串中既是 非空 前缀也是后缀&#xff08;不包括原字符串自身&#xff09;的字符串。 给你一个字符串 s&#xff0c;请你返回它的 最长快乐前缀。如果不存在满足题意的前缀&#xff0c;则返回…