浅拷贝导致的bug

错误代码:

//初始化formTableData的值
const formTableData = ref({saleOrderTime:'',saleOrderDetails:[]
});const showModal = async (item) => {//调接口获取后端返回的数据let data = (await api.searchSaleOrderById({saleOrderId:item.id})).dataconsole.log("data",data);//此时这里打印的data值是正确的formTableData.value = data[0]formTableData.value.saleOrderDetails = dataconsole.log("formTableData.value", formTableData.value);//这里就不对劲了,甚至导致了上述data的值也不对劲
};

saleOrderDetails 数据正常应该是一维数组

现在变成了可以无限展开的多维数组,且影响到了原有 data 的值

正确代码:将值进行深拷贝即可,因为我数据只有一层,所以这里我使用的是展开运算符进行深拷贝

const showModal = async (item) => {//调接口获取后端返回的数据let data = (await api.searchSaleOrderById({saleOrderId:item.id})).dataconsole.log("data",data);formTableData.value = {...data[0]} //只需将这里进行深拷贝即可formTableData.value.saleOrderDetails = dataconsole.log("formTableData.value", formTableData.value);
};

现在所有数据就一切正常啦!!!且不会影响到 data 里面的值

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

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

相关文章

全流程点云机器学习(一)使用CloudCompare自制sharpNet数据集

前言 这不是高支模项目需要嘛,他们用传统算法切那个横杆竖杆流程复杂耗时很长,所以想能不能用机器学习完成这些工作,所以我就来整这个工作了。 工欲善其事,必先利其器,在正式开始之前,我们先要搞懂如何切…

旅游分享系列之:福建旅游攻略

旅游分享系列之:福建旅游攻略 一、漳州1.福建土楼2.云水谣3.四菜一汤景点 二、厦门1.园林博览苑2.海上自行车道3.山海步道4.海滩5.闽南菜6.落日 三、泉州1.衙口沙滩2.海上日出3.珞珈寺4.海滩烟花 一、漳州 游玩2个景点:云水谣,四菜一汤可以住…

基于Java+SpringBoot+Vue前后端分离仓库管理系统设计实现

博主介绍:✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专…

QT常用类

五、常用类 QString 字符串类(掌握) QString是Qt的字符串类,与C的std::string相比, 不再使用ASCII编码。QString使用的是Unicode编码。 QString中每个字符都是一个16位的QChar,而不是8位的char。 QString完全支持中文&…

深入探究node搭建socket服务器

自从上篇中sokect实现了视频通话,但是是使用ws依赖库实现的服务端,所以最近再看ws源码,不看不知道,一看很惊讶。 接下来一点点记录一下,如何搭建一个简易的服务端socket,来实现上次的视频通讯。 搭建一个…

详解AP3216C(三合一sensor: 光照、距离、照射强度)驱动开发

目录 概述 1 认识AP3216C 1.1 AP3216C特性 1.2 AP3216C内部结构 1.3 AP3216C 硬件电路 1.4 AP3216C工作时序 1.4.1 I2C 写数据协议 1.4.2 I2C 读数据协议 1.5 重要的寄存器 1.5.1 系统配置寄存器 1.5.2 和中断相关寄存器 1.5.3 IR数据寄存器 1.5.4 ALS 数据寄存器 …

代码随想录算法训练营第59天 | 583.两个字符串的删除操作 + 72.编辑距离 + 编辑距离总结篇

今日任务 583. 两个字符串的删除操作 72. 编辑距离 编辑距离总结篇 583.两个字符串的删除操作 - Medium 题目链接:. - 力扣(LeetCode) 给定两个单词 word1 和 word2 ,返回使得 word1 和 word2 相同所需的最小步数。 每步 可以…

【数学建模规则】2024年第九届数维杯大学生数学建模挑战赛参赛指南

一、竞赛介绍 数维杯大学生数学建模挑战赛每年分为两场,每年上半年为数维杯国赛(5月,俗称小国赛),下半年为数维杯国际赛(11月),2023年第八届数维杯大学生数学建模挑战赛共有近1.4万名学生参赛,…

Unity之PUN2插件实现多人联机射击游戏

目录 📖一、准备工作 📺二、UI界面处理 📱2.1 登录UI并连接PUN2服务器 📱2.2 游戏大厅界面UI 📱2.3 创建房间UI 📱2.4 进入房间UI 📱2.5 玩家准备状态 📱2.6 加载战斗场景…

vue proxy解决跨域问题

https://blog.csdn.net/tttttrrrhh/article/details/127685318 cims系统ui

java 面向对象-上:类的结构之二

类的设计中,两个重要结构之二:方法 方法 描述类应该具的功能。 比如:Math类:sqrt()\random() \... Scanner类:nextXxx() ... Arrays类:sort() \ binarySearch() \ toString() \ equals() \ ... 1.举例 p…

[Java 项目亮点] 三层限流设计

思路来源:bilibili 河北王校长 文章目录 面试官可能会问你能详细介绍一下Nginx的http_limit_req_module模块吗?你能解释一下如何在Nginx中配置http_limit_req_module模块吗?你知道如何调整Nginx的http_limit_req_module模块以适应不同的业务需…

【服务器数据恢复】通过reed-solomon算法恢复raid6数据的案例

服务器数据恢复环境: 一台网站服务器中有一组由6块磁盘组建的RAID6磁盘阵列,操作系统层面运行MySQL数据库和存放一些其他类型文件。 服务器故障: 该服务器在工作过程中,raid6磁盘阵列中有两块磁盘先后离线,不知道是管理…

Linux--自定义shell

shell shell就是操作系统提供给用户与操作系统进行交互的命令行界面。它可以理解为一个用户与操作系统之间的接口,用户可以通过输入命令来执行各种操作,如文件管理、进程控制、软件安装等。Shell还可以通过脚本编程实现自动化任务。 常见的Unix系统中使…

创新性3D数据合成模型,微软推出EgoGen

随着AR、VR等设备的广泛应用,第一人称的应用开始增多。但在研发方面面临不同的挑战,例如,图像模糊、视觉混乱、遮挡更严重等,给视觉模型的训练带来重大挑战。 一方面,人工标注真实第一视角数据集,来培训深度学习模型的成本和难度都很高。另一…

Java 泛型

优质博文:IT-BLOG-CN 一、为什么要有泛型 【1】解决元素存储的安全性问题。 【2】解决获取数据元素时,需要类型强转的问题。 【3】可以统一数据类型,便于操作。 【4】将运行时的异常提前到了编译时,提高了效率。 【5】实现代码的…

Day20_网络编程(软件结构,网络编程三要素,UDP网络编程,TCP网络编程)

文章目录 Day20 网络编程学习目标1 软件结构2 网络编程三要素2.1 IP地址和域名1、IP地址2、域名3、InetAddress类 2.2 端口号2.3 网络通信协议1、OSI参考模型和TCP/IP参考模型2、UDP协议3、TCP协议 2.4 Socket编程 3 UDP网络编程3.1 DatagramSocket和DatagramPacket1、Datagram…

小世界网络:直径、分形、同配性

1.小世界网络特点 —— 网络直径接近于网络中节点数量的自然对数 2.小世界分形网络 —— 移除弱链接的小世界网络 3.同配性分析 —— Pearson相关系数、邻居相关度 在宏观层面上,关注平均度、度分布和聚类等全局结构特征的影响。更高的平均度被认为会导致更…

Zookeeper简介及选举机制

1.概述 Zookeeper是一个开源的,分布式的,为分布式框架(如下图中的Hadoop和Hive)提供协调服务的Apache项目。 工作机制:基于观察者设计模式的分布式服务管理框架,负责存储和管理数据,接受观察者…

[算法沉淀记录] 排序算法 —— 归并排序

排序算法 —— 归并排序 算法介绍 归并排序是一种分治算法,由约翰冯诺伊曼在1945年发明。它的工作原理是将未排序的列表划分为n个子列表,每个子列表包含一个元素(包含一个元素的列表被认为是有序的),然后重复合并子列表以生成新的有序子列表…