码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 单中的部分字段失去焦点后,将数据还原为进入弹窗时的接口数据(深拷贝)


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

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

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

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

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

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

    通过使用 JSON.parse(JSON.stringify(response.data)) 对数据进行深拷贝,确保备份数据和原始数据是两个独立的对象。这样,当你修改备份数据的字段时,不会改变原始数据。

    请注意,JSON.parse(JSON.stringify(...)) 的方法对于大型复杂对象或包含非标准JSON数据的对象可能不适用。在这种情况下,你可能需要使用其他库或自定义函数来执行深拷贝操作。

  • 相关阅读:
    计算机毕业设计Java菜市场的疫情防控管理系统(源码+系统+mysql数据库+lw文档)
    ArcGIS道路空间指数的计算详解(附矢量练习数据)
    Spark 3.0 - 9.Ml 朴素贝叶斯中文分类分析与实战
    macbook pro 2018 安装 arch linux 双系统
    第十四届蓝桥杯大赛软件赛决赛 C/C++ 大学 B 组 试题 C: 班级活动
    Wireshark数据包分析——时间盲注/延时注入攻击
    5. 最长回文子串
    如何限制文件只能通过USB打印机打印,限制打印次数和时限并且无法在打印前查看或编辑内容
    FullCalendar日历插件说明文档
    电子信息类毕业生找工作有多难?研究所难进?大厂太卷?
  • 原文地址:https://blog.csdn.net/xiaoming4965/article/details/133162762
  • 最新文章
  • 【JVM】编译执行与解释执行的区别是什么?JVM 使用哪种方式?
    用 Hashids 优雅解决 C 端自增 ID 暴露问题
    V8引擎 精品漫游指南--Ignition篇(上) 指令 栈帧 槽位 调用约定 内存布局 基础内容
    LLVM Pass快速入门(四):代码插桩
    milkup:桌面端 markdown AI续写和即时渲染
    基于项目工程构建SBOM(软件物料清单)的研究
    鸿蒙应用开发UI基础第二节:鸿蒙应用程序框架核心解析与实操
    .NET 中如何快速实现 List 集合去重?
    扣子Coze实战:从0到1打造抖音+小红书热点监控智能体
    浅谈数据访问层
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
小工具 小游戏
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1

京公网安备 11010502049817号