浅拷贝导致的bug

错误代码:

//初始化formTableData的值
const formTableData = ref({
  saleOrderTime:'',
  saleOrderDetails:[]
});

const showModal = async (item) => {
  //调接口获取后端返回的数据
  let data = (await api.searchSaleOrderById({saleOrderId:item.id})).data

  console.log("data",data);//此时这里打印的data值是正确的

  formTableData.value = data[0]

  formTableData.value.saleOrderDetails = data
   
  console.log("formTableData.value", formTableData.value);//这里就不对劲了,甚至导致了上述data的值也不对劲
};

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

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

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

const showModal = async (item) => {
  //调接口获取后端返回的数据
  let data = (await api.searchSaleOrderById({saleOrderId:item.id})).data

  console.log("data",data);

  formTableData.value = {...data[0]} //只需将这里进行深拷贝即可

  formTableData.value.saleOrderDetails = data
   
  console.log("formTableData.value", formTableData.value);
};

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

open3d 连接两个点云

连接两个点云 一、连接两个点云二、代码三、结果1.coloud1点云2.cloud2点云3.cloud1 和 colud2 合并4.生成连接字段(拼接颜色) 四、相关链接五、问题与解决方案1.问题2.解决方案 一、连接两个点云 看代码吧。。。 二、代码 import numpy as np import…

1TB! 台湾最新倾斜摄影3DTiles数据分享

之前的文章分享了546GB香港倾斜摄影3DTiles数据,主要是验证倾斜模型3DTiles转换工具的生产效率和数据显示效率,结果对比可以看出无论是数据生产速度以及成果数据显示效率上,都优于其他两种技术路线。最近使用倾斜模型3DTiles工具生产了台湾地…

Zookeeper简介及选举机制

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

查看navicat保存的数据库连接密码

背景 经常使用navicat的朋友可能会碰到忘记数据库连接密码的情况,自然会想到navicat连接配置中就保存了密码。 个人经验,按以下步骤可查看密码明文 本人在mac上使用的navicat版本 1,导出connection_local.ncx 点击OK导出保存为connection_l…

文件上传失败原因汇总(个人情况总结)

1.后端配置application里有服务限制大小 # Spring spring:servlet:multipart:max-file-size: 500MBmax-request-size: 500MB 2.如果你用了dubbo,要调整生产者和消费者超时时间以及payload大小,最好是dubbo自增策略,防止用了dubbo的服务端口冲…

项目优化-

前言 用户浏览菜品,添加购物车,下单等操作最终都会反映成一个sql,操作数据库。 但是当前系统只部署了一台数据库,读和写所有压力都由一台数据库承担,压力大;如果数据库服务器磁盘损坏则数据丢失&#xff0…

Flutter(一):安装和环境配置、创建Flutter项目

安装和环境配置、创建Flutter项目 Flutter 下载方式1方式2 Flutter 环境配置配置国内镜像站点解压 Flutter将 flutter 添加到系统环境变量中运行 flutter doctor来验证安装 Android Studio下载插件创建项目安装 Android SDK 工具在模拟器上运行 Flutter 下载 方式1 全版本&…

谈谈六西格玛(6σ)

什么是六西格玛(6σ)? 六西格玛(6σ)是一种管理方法和质量改进体系,旨在减少组织过程中的变异性,提高业务绩效,并实现客户满意度的持续提升。它由美国Motorola公司在20世纪80年代发…

liunx文件权限和内核

liunx文件权限和内核 liunx内核liunx权限liunx用户用户的切换liunx文件权限属性liunx文件默认权限liunx文件权限的粘滞位 liunx内核 liunx内核模拟图 在liunx中内核可以想象成一堆软件。由于内核过于复杂,我们并不想直接操作内核。因为内核1. 内核过于复杂&#x…

超级抽象的前端2

vue3的调用方法失败的原因 function validateConfirm(rule, value, callback) {if (value ! form.password) {callback(new Error(两次输入的密码不一致))} else {callback()}function showAgreement() {dialogVisible.value true}function submitForm() {// 这里是提交表单的…

ROS1查看版本

目录 方法一方法二 方法一 rosversion -d方法二

计算机网络面经-从浏览器地址栏输入 url 到显示主页的过程?

大概的过程比较简单,但是有很多点可以细挖:DNS解析、TCP三次握手、HTTP报文格式、TCP四次挥手等等。 DNS 解析:将域名解析成对应的 IP 地址。TCP连接:与服务器通过三次握手,建立 TCP 连接向服务器发送 HTTP 请求服务器…

命令绕过 [安洵杯 2019]easy_web1

打开题目 打开题目在URL处看到cmd,本能的直接用系统命令ls 发现被过滤了。又注意到imgTXpVek5UTTFNbVUzTURabE5qYz0似乎是一串base64 拿去base64解码 再hex解码一次得到555.png 再将其hex加密 base64加密 反向推出index.php的payload:?imgTmprMlJUWTBOalUzT0RK…

MybatisPlus--03--IService、ServiceImpl

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 1. IService接口1.1 IService、ServiceImpl 接口的使用第一步:实现basemapper接口第二步:编写service类第三步:编写serviceImpl第…

电路设计(28)——交通灯控制器的multisim仿真

1.功能设定 南北、东西两道的红灯时间、绿灯时间均为24S,数码管显示倒计时。在绿灯的最后5S内,黄灯闪烁。有夜间模式:按下按键进入夜间模式。在夜间模式下,数码管显示计数最大值,两个方向的黄灯不停闪烁。 2.电路设计 …

FPGA领域顶级学术会议

FPGA领域顶级学术会议主要有FPGA,FCCM,FPL和FPT。 1 FPGA 会议全名是: ACM/SIGDA International Symposium on Field-Programmable Gate Arrays 网站是:https://dl.acm.org/conference/fpga FPGA常年在美国举办,每年2月,偏FPGA基础研究; 该会议的论文免费下载。这个比…

导出本地环境venv包whl文件。

把python环境 venv 对应包的文件导出成whl文件 将 Python 虚拟环境中包导出到文件,可以方便地在其他电脑上安装相同的环境,无需重复下载。 使用 pip freeze 和 pip download 使用 pip freeze 命令列出所有已安装的包和版本号保存到 requirements.txt …

【DDD】学习笔记-薪资管理系统的测试驱动开发

回顾薪资管理系统的设计建模 在 3-15 课,我们通过场景驱动设计完成了薪资管理系统的领域设计建模。既然场景驱动设计可以很好地与测试驱动开发融合在一起,因此根据场景驱动设计的成果来开展测试驱动开发,就是一个水到渠成的过程。让我们先来…

使用向量数据库pinecone构建应用03:推荐系统 Recommender Systems

Building Applications with Vector Databases 下面是这门课的学习笔记:https://www.deeplearning.ai/short-courses/building-applications-vector-databases/ Learn to create six exciting applications of vector databases and implement them using Pinecon…

C语言中的assert.h:调试助手与断言详解

在C语言编程中,assert.h头文件提供了非常有用的断言(Assertion)功能,它主要用于开发和调试阶段,确保程序在运行时满足某些预期条件。如果这些条件未得到满足,则程序会立即停止执行,并打印出有关…