vue-$set修改深层对象的值

news2024/10/4 18:03:28
背景:

点击编辑按钮,打开修改预算的抽屉,保存后更新此行数据的预算,以前是调接口刷新表格,这次的数据是由前端处理更新,由于数据层级比较深,使用$set来修改两层嵌套对象

使用方法:

this.$set( target, key, value )

  • target:要更改的数据源(可以是对象或者数组)
  • key:要更改的具体数据
  • value :重新赋的值 
 方法1

我刚试了一下,发现这样链式到要修改的对象也能生效

因为这个页面我有不同的抽屉,currentName代表我修改的那个表格,currentIndex代表要修改那一行。所以【target】其实为 this.tableData[2].crowd,【key】是预算值budget,【value 】是修改值。可以根据自己的结构来处理

this.$set(this[this.currentName][this.currentIndex].crowd, 'budget', value)
方法2

先把当前那一行的预算值修改了,再修改整个表格中当前索引的值,注意,这里必须要把扩展当前行的其他值,不然整个行只有crowd这个对象了。

this.$set(this.currentRow, 'budget', value)
this.$set(this[this.currentName],this.currentIndex,{
    ...this[this.currentName][this.currentIndex],
    crowd: this.currentRow
})

 

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

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

相关文章

upload-labs-第五关

目录 第五关 1、构造.user.ini文件 2、构造一个一句话木马文件,后缀名为jpg 3、上传.user.ini文件后上传flag.jpg 4、上传成功后访问上传路径 第五关 原理: 这一关采用黑名单的方式进行过滤,不允许上传php、php3、.htaccess等这几类文件…

3D按F3为什么显示不出模型?---模大狮模型网

对于3D建模软件的用户来说,按下F3键通常是用来显示或隐藏模型的功能之一。然而,有时当按下F3键时,却无法正确显示模型,这可能会让用户感到困惑。模大狮将探讨这种情况发生的可能原因以及解决方法,帮助设计师们更好地理…

快速搭建高效运营体系,Xinstall App下载自动绑定助您一臂之力

在互联网的浪潮中,App的推广与运营面临着诸多挑战。如何在多变的互联网环境下迅速搭建起能时刻满足用户需求的运营体系,成为了众多企业关注的焦点。今天,我们就来聊聊如何通过Xinstall的App下载自动绑定功能,轻松解决App推广与运营…

[word] word文档字体间距怎么调整? #其他#经验分享

word文档字体间距怎么调整? 调整word文档字体间距的方法: 打开一个预先写好文字的文档。选中所有文字,点击字体右下角的“更多选项”。 在弹出的“字体”对话框中进入“字符间距”选项卡,在“间距”选项中即可设置字体间距。 设…

智慧视觉怎么识别视频?智慧机器视觉是通过什么步骤识别视频的?

智慧视觉功能怎么识别视频?智慧视觉是搭载在智能设备比如手机、AI盒子、机器视觉系统上的一个应用程序或特性,采用计算机视觉和人工智能的技术来识别图像或视频中的内容。如果想了解视频识别,就要明白智慧视觉功能会涉及的以下几个关键步骤和…

知识图谱的应用---智慧司法

文章目录 智慧司法典型应用 智慧司法 智慧司法是综合运用人工智能、大数据、互联网、物联网、云计算等信息技术手段,遵循司法公开、公平、公正的原则,与司法领域业务知识经验深度融合,使司法机关在审判、检查、侦查、监管职能各方面得到全面的…

OpenShift 4 - OpenShift Service Mesh 3 预览

《OpenShift / RHEL / DevSecOps 汇总目录》 了解 OpenShift Service Mesh 3 的变化 OpenShift Service Mesh 是一套在 OpenShift 上安装部署、跟踪监控 Istio 运行环境的实现。红帽在 2023 年底推出了技术预览版的 OpenShift Service Mesh 3,它和目前的 OpenShif…

经典神经网络(10)PixelCNN模型、Gated PixelCNN模型及其在MNIST数据集上的应用

经典神经网络(10)PixelCNN模型、Gated PixelCNN模型及其在MNIST数据集上的应用 1 PixelCNN PixelCNN是DeepMind团队在论文Pixel Recurrent Neural Networks (16.01)提出的一种生成模型,实际上这篇论文共提出了两种架构:PixelRNN和PixelCNN,两…

鸿蒙开发的南向开发和北向开发

鸿蒙开发主要分为设备开发和应用开发两个方向,也叫南向开发和北向开发: 鸿蒙设备开发(南向开发),要侧重于硬件层面的开发,涉及硬件接口控制、设备驱动开发、鸿蒙系统内核开发等,目的是使硬件设备能够兼容并…

Linux环境---在线安装MYSQL数据库

Linux环境—在线安装MYSQL数据库 一、使用步骤 1.安装环境 Mysql 驱动 8.0 需要 jdk1.8 才行。 JDK版本:1.8 参考文档 MYSQL版本:8.0.2 下载链接: https://pan.baidu.com/s/1MwXIilSL6EY3OuS7WtpySA?pwdg263 操作系统:CentOS 1.1 建立存…

Python数据分析II

目录 1.HS-排序返回前n行 2.HS-相关性 3.缺失值处理 4.时间 5.时间索引 6.分组聚合 7.离散分箱 8.Concat关联(索引关联) 9.Merge关联(字段关联) 10.join合并(左字段,右索引) 11.行列转置及透视表 12.数据可视化-面向过程 13.数据可视化-面向对象 14.快速生成柱状…

github有趣项目:Verilog在线仿真( DigitalJS+edaplayground)

DigitalJS https://github.com/tilk/digitaljs这个项目是一个用Javascript实现的数字电路模拟器。 它旨在模拟由硬件设计工具合成的电路 像 Yosys(这里是 Github 存储库),它有一个配套项目 yosys2digitaljs,它可以转换 Yosys 将文…

STCunio数字电源带PID数字闭环(带详细的代码说明文档)

STCunio,即 system on chip unusual i/o,采用类似 arduino 构架设计,即使没有单片机知 识的设计师和艺术家们能够很快地通过它学习电子和传感器的基础知识,并应用到他们的设 计当中。设计中所要表现的想法和创意才是最主要的,至于…

创新指南 | 5个行之有效的初创企业增长策略

本文探讨了五种初创企业实现快速增长的有效策略:利用网络效应通过激励和资本化用户增长;通过持续提供高质量内容建立信任和权威的内容营销;利用简单有效的推荐计划扩展用户群;采用敏捷开发方法快速适应市场变化和客户反馈&#xf…

基于springboot实现社区养老服务系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现社区养老服务系统演示 摘要 现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本社区养老服务系统就是在这样的大环境下诞生,其可以帮助…

签名安全规范:解决【请求对象json序列化时,时间字段被强制转换成时间戳的问题】

文章目录 引言I 签名安全规范1.1 签名生成的通用步骤1.2 签名运算(加密规则)1.3 对所有传入参数按照字段名的 ASCII 码从小到大排序(字典序)1.4 允许的请求头字段1.5 签名校验工具II 注解校验签名2.1 获取请求数据,并校验签名数据2.2 解决时间格式被强制转换成时间戳的问题…

2024年数据防泄密软件精选,五款热门防泄密软件集锦

在信息爆炸的今天,企业数据的安全性已成为不可忽视的关键问题。 随着数字化转型的加速,数据泄露的风险也随之增加,这对企业的核心竞争力构成了严重威胁。 为了构建坚不可摧的数据防线,选择高效可靠的数据防泄密软件显得尤为重要…

爬取基金收盘价并用pyecharts进行展现

爬取基金收盘价并用pyecharts进行展现 一、用到的第三方包 因为使用到了一些第三方的包,包还是比较大的如果直接从社区下载比较费劲,所以建议配置国内镜像源,这里以清华的镜像源为例。 pip config set global.index-url https://pypi.tuna…

FastAdmin自定义滚动条

效果 实现过程 HTML代码 <style>.custom-scrollbar {position: fixed;/*bottom: 0px;*/height: 20px;width: 97.5%;overflow-y: scroll;overflow-x: scroll;z-index: 100;}#scrollDivTable{height: 20px;}/*原滚动条不显示*//*.fixed-table-body::-webkit-scrollbar {*/…

电脑知识 如何看懂串口通信协议(程序员视角)

目录 前言 一、串口文档 二、明确身份 三、串口设置 四、看懂命令格式 五、看懂发送命令的格式 1.帧头和帧尾 2.帧内数据长度 3.帧内数据/具体命令 4.整体命令 5.真正的命令字和命令值 六、第一个案例 1.发送命令 2.雷达的回答 七、作者的话 前言 用一个案例&#…