单中的部分字段失去焦点后,将数据还原为进入弹窗时的接口数据

2023-09-22 11:19:51

要实现在表单中的部分字段失去焦点后,将数据还原为进入弹窗时的接口数据,可以在进入弹窗时将接口数据保存为一个备份,然后在失去焦点的事件处理函数中将字段值设置为备份数据中相应字段的值。

如果 this.form.originalData 的值被同步修改,原因可能是因为 JavaScript 中的对象是引用类型。当你将一个对象赋值给另一个变量时,实际上是将引用地址赋值给了新变量,而不是复制对象本身。所以在这种情况下,如果你直接修改 this.form.originalData 中的字段,那么 this.form 中对应的字段也会被修改,因为它们引用的是同一个对象。

为了避免这个问题,你可以使用深拷贝来创建 this.form.originalData 的备份,确保备份和原始数据是两个独立的对象。

在Vue.js中,你可以使用 JSON.parse(JSON.stringify(object)) 来进行深拷贝。修改示例代码如下:

<el-form-item label="相机增益(db)" prop="cameraGain" label-width="100px">
  <el-input v-model="form.cameraGain" placeholder="请输入参数键名"
    @blur="handleBlurCameraGain" />
</el-form-item>
data() {
  return {
    form: {
      cameraGain: '',
      originalData: {
        cameraGain: '' // 进入弹窗时的接口数据备份
      }
    },
  };
},

 

mounted() {
  // 模拟获取接口数据并保存为备份数据
  this.getFormData().then(response => {
  this.form = response.data;  //原数据
    this.form.originalData = JSON.parse(JSON.stringify(response.data)); //备份
  });
},
 handleBlurCameraGain() {
    // 在失去焦点的事件处理函数中将字段值还原为备份数据中的值
    this.form.cameraGain = this.form.originalData.cameraGain;
  },

更多推荐

WebGL 选中物体

目录前言如何实现选中物体示例程序(PickObject.js)代码详解gl.readPixels()函数规范示例效果前言有些三维应用程序需要允许用户能够交互地操纵三维物体,要这样做首先就得允许用户选中某个物体。对物体进行选中操作的用处很广泛。比如,让用户选中三维用户界面上的一个按钮,或者让用户选中三维场景中的多张照片中

提升前端开发效率:基于vue的van-radio-group组件封装指南

前言vant作为一款流行的ui框架,其中,van-radio-group组件是一个常用的单选框组件,但有时我们需要根据项目需求进行定制化封装。本文将介绍如何基于vue框架封装van-radio-group组件,让我们一起来探索吧!封装文件在这个组件中,使用了vant框架提供的van-radio-group和van-ra

Linux-网卡和网络配置

链接一篇大佬的博客:Linux之手把手教会修改网卡名称文章目录修改网卡名称步骤1:修改“/etc/default/grub”步骤2:修改“/etc/sysconfig/network-scripts”下的文件步骤3:修改“ifcfg-eth0”配置步骤4:判断操作系统的引导模式步骤5:根据不同的引导模式重新读取配置文件

el-table 列背景色渐变

最初的想法是,给每一行添加背景色,逐行递减透明度,发现结果比较突兀,效果如下:如果有需要这种样式的,代码如下:<template><div><el-table:data="tableData":header-cell-style="headerCellStyle":cell-style="cellStyle"style

Redis Part1

单体架构:一台Web服务器、一台数据库服务器。回顾,关系型数据库:基于二维表来存储数据的数据库就是关系型数据库。MySQL跟Redis的区别:MySQL是关系型数据库,它是基于表来存储数据的,MySQL数据是写在磁盘的,它是跟磁盘进行交互的;Redis是非关系型数据库,它是把数据存储在内存当中的,是跟内存进行交互的。M

Go基础语法:数组

6数组6.1数组的定义数组在定义时就需要声明其元素数量和类型://T即元素类型var数组变量名[元素数量]T如:vara[5]int.数组的长度必须是常量,并且长度是数组类型的一部分,一旦定义,长度不能变。所以,[5]int和[10]int是不同的类型。packagemainimport"fmt"funcmain(){

功能基础篇3——Python中的输入输出、文件读写、序列化

IO文件读写openopen()为内置函数,用于读写文件mode读写x,create,创建,文件存在报错,可写不可读r,read,读入,默认读写方式,文件不存在报错,可读不可写w,write,写入,文件不存在会创建文件,存在清空文件内容,可写不可读a,append,追加,文件不存在会创建文件,光标移至文件末尾,可写不可

CentOS常用命令

一、yum命令1.1列表源服务器软件包yumlist//列出yum源服务器上所有的软件包,太多了,一般不单独使用,大多数要配合管道grep使用yumlistopenssl*//列出yum源服务器上所有以openssl开头的软件包yumlist|grepopenssl//列出yum源服务器上所有包含openssl的软件包

实时可追溯性和事后可追溯性

在当今的世界里,成功的组织都将其创新和复杂产品开发流程建立在跨多个工作流的互联数据上。为此,他们需要收集利益相关者的想法以构建系统架构,管理高级需求以创建详细的用户故事,并实施验证程序以检查问题。同时,在满足标准规定并在当前的市场环境中保持竞争力的过程中,与各利益相关者的协作需要深度的追踪。许多行业标准都要求有需求追踪

记一次 .NET 某仪器测量系统 CPU爆高分析

一:背景1.讲故事最近也挺奇怪,看到了两起CPU爆高的案例,且诱因也是一致的,觉得有一些代表性,合并分享出来帮助大家来避坑吧,闲话不多说,直接上windbg分析。二:WinDbg分析1.CPU真的爆高吗这里要提醒一下,别人说爆高不一定真的就是爆高,我们一定要拿数据说话,可以用!tp观察下。0:000>!tplogSta

关于ITSS认证资质整改和降级

最近来我公司咨询ITSS年审换证的企业比较多,很多企业伙伴的ITSS信息技术服务运维符合性证书2023年到期将面临换证,很多企业觉得拿证三年了都没有问题,换证随便糊弄一下就行了。但是在年审换证再评估中会遇到很多问题,就一些问题我们武汉好地科技小编整理出了一套年审换证再评估相关注意事项。ITSS认证再评估相关事项:1.持

热文推荐