vue响应式数据-修改对象的属性值,视图不更新
如图:

一:问题是:
我把数据处理后能console.log()打印出来,但是页面的内容不能同步的更新渲染;
二:要求:
在数组循环列表里面,我点击单个的item按钮时,需要实时加载进度条到90%,并改变item的flowStatus值同时在页面上渲染当前改变后的状态值。
三:方式:
用了$delete()先删除这个已经存在并且要改变的键值flowStatus;
this.$delete(flow,‘flowStatus’)
再$set()重新赋值flowStatus为我需要的状态值:
this.$set(flow,‘flowStatus’,‘0’)
进度条加载一样。。。
四:代码
<el-row v-for="(flow,i) in item.children" :key="flow.flowId" class="flowinfo"><el-col :span="10" :offset="1" style=""><div><template><el-tag v-if="flow.flowStatus === 10 || flow.flowStatus === 20" color="#red">{{'等待中'}}</el-tag><el-tag v-if="flow.flowStatus === '0'" color="#E9EAAC">{{'启动中...'}}</el-tag></template></div><div class="flow"><el-row><el-col v-if="flow.flowStatus === 30" :span="15" :offset="2">任务进度:<el-progress :percentage="90" :key="i" :format="format" top="20px"></el-progress></el-col><el-col v-else :span="15" :offset="2">任务进度:<el-progress :percentage="flow.percentage" :key="i" :format="format" top="20px"></el-progress></el-col></el-row></div></el-col><el-col :span="10" :offset="1"><div style="padding-bottom: 30px;" ><el-button v-else style="float: right;" type="primary" size="mini" @click="start(flow)" >{{ '启动' }}</el-button></div></el-col></el-row>
启动按钮
主要看前面几行:有注释的
点击某条列表的按钮后,该对象里面的状态值flowStatus由a变为b,进度条自己加载到90%
start(flow) {this.$nextTick(() => {this.$delete(flow,'flowStatus') //先删掉对象里的flowStatus值this.$set(flow,'flowStatus','0') //再新增flowStatus值为0 (第一个值为要改变的对象,第二个为要改的键名,第三个为改后的键值)if(flow.percentage < 100) { //这是进度条的变化this.$delete(flow,'percentage') //删掉对象里的percentagethis.$set(flow, 'percentage', 90); // 再新设置percentage值,使其发生变化为90}this.$forceUpdate()setTimeout(() => {let username = storage.get("baseInfo", "local") ? storage.get("baseInfo", "local").username : null;const queryForm = {projectId: projectId,...}startExecutor(queryForm).then(res => {if(res.code === "200") {this.$message.success('执行成功')} else {this.$notify({title: '执行错误',message: res.message,type: 'warning'});}setTimeout(() => {this.getTaskList(this.taskData)}, 1000);})}, 3000);})},
点击改变的是里面的flowStatus和percentage
item.children=[
{
“execFlowList”: [
{
“runDate”: “20241205”,
“submitTime”: 1733469100453,
“submitUser”: “hadoop”,
“difftime”: “0 sec”,
“startTime”: “2024-12-06 15:11:40”,
“comment”: “”,
“endTime”: “2024-12-06 15:11:40”,
“flowId”: “defence”,
“projectId”: 6,
“outTime”: “0 sec”,
“execId”: 230,
“status”: “FAILED”
}
],
“percentage”: 0,
“flowExecId”: 230,
“flowStatus”: 70,
“flowId”: “defence”
}…
]
相关文章:
vue响应式数据-修改对象的属性值,视图不更新
如图: 一:问题是: 我把数据处理后能console.log()打印出来,但是页面的内容不能同步的更新渲染; 二:要求: 在数组循环列表里面,我点击单个的item按钮时,需要实时加载进度…...
【OpenCV计算机视觉】图像处理——平滑
本篇文章记录我学习【OpenCV】图像处理中关于“平滑”的知识点,希望我的分享对你有所帮助。 目录 一、什么是平滑处理 1、平滑的目的是什么? 2、常见的图像噪声 (1)椒盐噪声 编辑(2) 高斯噪声 &a…...
C#编程报错- “ComboBox”是“...ComboBox”和“...ComboBox”之间的不明确的引用
1、问题描述 在学习使用C#中的Winform平台编写一个串口助手程序时, 在编写一个更新ComboBox列表是遇到了问题,出错的代码是 2、报错信息 CS1503 参数 2: 无法从“System.Windows.Forms.ComboBox”转换为“System.Windows.Forms.ComboBox” CS1503 …...
JAVA:访问者模式(Visitor Pattern)的技术指南
1、简述 访问者模式(Visitor Pattern)是一种行为型设计模式,允许你将操作分离到不同的对象中,而无需修改对象本身的结构。这种模式特别适合复杂对象结构中对其元素进行操作的场景。 本文将介绍访问者模式的核心概念、优缺点,并通过详细代码示例展示如何在实际应用中实现…...
YashanDB共享集群产品能力观测:细节足见功底
本文基于前泽塔数科研发总监-王若楠2024年11月在“2024年国产数据库创新生态大会”-“根”技术专场的演讲整理形成,主要对崖山共享集群YAC的架构、功能、高可用性、性能四大方面进行全面测试,并分享了测试环境和测试结论。 年初,基于某些商业…...
【Linux】—简单实现一个shell(myshell)
大家好呀,我是残念,希望在你看完之后,能对你有所帮助,有什么不足请指正!共同学习交流哦! 本文由:残念ing原创CSDN首发,如需要转载请通知 个人主页:残念ing-CSDN博客&…...
@FeignClient用于Nacos微服务间的接口调用
依赖:<!-- spring-boot启动依赖 --> <!-- 提供者 --> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- openFeign --> <…...
认识javascript中的模块化
什么是模块化? 将程序⽂件依据⼀定规则拆分成多个文件,拆分出来每个⽂件就是⼀个模块,模块中的数据都是私有的,模块之间互相隔离。如果不进行隔离,可能会造成模块间的变量定义有冲突,导致程序崩溃 为啥要使…...
容器设计模式:Sidecar
文章目录 容器设计模式:Sidecar 模式1. 什么是 Sidecar 模式?2. Sidecar 模式的原理2.1 工作机制2.2 常见用途 3. Sidecar 模式示例示例:日志收集 4. Sidecar 模式的架构图图例: 5. Sidecar 模式的优点6. Sidecar 模式的局限性7. …...
ensp 静态路由配置
A公司有广州总部、重庆分部和深圳分部3个办公地点,各分部与总部之间使用路由器互联。广州、重庆、深圳的路由器分别为R1、R2、R3,为路由器配置静态路由,使所有计算机能够互相访问,实训拓扑图如图所示 绘制拓扑图 给pc机配置ip地址…...
MATLAB图卷积神经网络GCN处理分子数据集节点分类研究
全文链接:https://tecdat.cn/?p38570 本文主要探讨了如何利用图卷积网络(GCN)对图中的节点进行分类。介绍了相关的数据处理、模型构建、训练及测试等环节,通过对分子数据集的操作实践,展示了完整的节点分类流程&#…...
Android-Glide详解
目录 一,介绍 二,使用 三,源码分析思路 四,with源码分析 五,模拟Glide生命周期管理 一,介绍 Glide目前是安卓最主流的加载图片的框架,也是源码最为复杂的框架之一。 要想完完全全吃透Glide的源…...
2.Nuxt学习 组件使用和路由跳转相关
组件定义和使用 普通组件的使用 在Nuxt的项目中,可以直接在components文件夹下建立组件 在页面中直接使用 无需引入 多层级组件的使用 我们有时候会需要多层级组件来简化代码结构 比如我们需要给Banner组件添加一个子组件 我们直接建立其名称的文件夹 写入子组…...
代码开发相关操作
使用Vue项目管理器创建项目:(vue脚手架安装一次就可以全局使用) windowR打开命令窗口,输入vue ui,进入GUI页面,点击创建-> 设置项目名称,在初始化git下面输入:init project&…...
动态导出word文件支持转pdf
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、功能说明二、使用步骤1.controller2.工具类 DocumentUtil 导出样式 前言 提示:这里可以添加本文要记录的大概内容: 例如ÿ…...
登陆harbor发现证书是错误的, 那么如何更新harbor的证书呢
Error response from daemon: Get "https://172.16.21.35/v2/": tls: failed to verify certificate: x509: certificate is valid for 127.0.0.1, ::1, 172.16.21.30, not 172.16.21.35 版本 v2.10.1-b7b88476 不需要从头看, 直接看最下面的成功的证书创建 这里面首…...
【Leetcode Top 100】199. 二叉树的右视图
问题背景 给定一个二叉树的 根节点 r o o t root root,想象自己站在它的右侧,按照从顶部到底部的顺序,返回从右侧所能看到的节点值。 数据约束 二叉树的节点个数的范围是 [ 0 , 100 ] [0,100] [0,100] − 100 ≤ N o d e . v a l ≤ 100…...
React自学:如何使用localStorage,以及如何实现删除笔记操作
1. 初始化notes 以下这段代码完成了这些操作: 调用 localStorage.getItem("notes") 从浏览器的本地存储中获取名为 “notes” 的数据。使用 JSON.parse 将获取到的字符串解析成数组。如果本地存储中没有 “notes” 数据(返回值为 null&#…...
go语言使用websocket发送一条消息A,持续接收返回的消息
在Go语言中实现一个WebSocket客户端,可以使用gorilla/websocket这个非常流行的库来处理WebSocket连接。下面是一个简单的示例,展示了如何创建一个WebSocket客户端,向服务器发送消息"A",并持续接收来自服务器的响应。 首…...
如何对小型固定翼无人机进行最优的路径跟随控制?
控制架构 文章继续采用的是 ULTRA-Extra无人机,相关参数如下: 这里用于guidance law的无人机运动学模型为: { x ˙ p V a cos γ cos χ V w cos γ w cos χ w y ˙ p V a cos γ sin χ V w cos γ w sin χ…...
具备百万并发用户执行能力,静态页面加载的平均响应时间低于1.1毫秒, 事务请求处理成功率100%
在Tomcat性能测试与技术选型中,“具备百万并发用户执行能力”“静态页面加载平均响应时间低于1.1毫秒”“事务请求处理成功率100%”是常被提及的理想指标。这些指标看似彰显系统高性能,实则需结合计算机底层原理、操作系统限制、工程实践场景综合研判。本…...
从零搭建stm32物联网节点:基于快马AI生成温室监测系统实战代码
最近在做一个智能温室监测的小项目,正好用到了InsCode(快马)平台来生成STM32的代码框架,整个过程比我预想的顺利很多。这里记录下整个实现思路和关键点,给有类似需求的开发者参考。 项目需求分析 这个温室监测节点需要实现三个核心功能&#…...
WebDataset数据压缩算法:Zstd、LZ4与Snappy性能对比
WebDataset数据压缩算法:Zstd、LZ4与Snappy性能对比 【免费下载链接】webdataset A high-performance Python-based I/O system for large (and small) deep learning problems, with strong support for PyTorch. 项目地址: https://gitcode.com/gh_mirrors/we/w…...
如何快速入门WebGL:10个实用技巧带你玩转3D图形
如何快速入门WebGL:10个实用技巧带你玩转3D图形 【免费下载链接】WebGL The Official Khronos WebGL Repository 项目地址: https://gitcode.com/gh_mirrors/we/WebGL WebGL(Web Graphics Library)是用于在网页浏览器中渲染交互式2D和…...
为什么你需要一个本地漫画图书馆?哔咔漫画下载器给你完整解决方案
为什么你需要一个本地漫画图书馆?哔咔漫画下载器给你完整解决方案 【免费下载链接】picacomic-downloader 哔咔漫画 picacomic pica漫画 bika漫画 PicACG 多线程下载器,带图形界面 带收藏夹,已打包exe 下载速度飞快 项目地址: https://gitc…...
SiameseUIE模型Git使用进阶:团队协作开发指南
SiameseUIE模型Git使用进阶:团队协作开发指南 1. 开篇:为什么团队开发需要Git规范 咱们做AI项目开发时,经常遇到这样的场景:几个人同时修改代码,结果合并时冲突不断;或者某位同事的代码把整个项目搞崩了&…...
如何快速使用网络性能测试工具:面向初学者的完整指南
如何快速使用网络性能测试工具:面向初学者的完整指南 【免费下载链接】iperf3-win-builds iperf3 binaries for Windows. Benchmark your network limits. 项目地址: https://gitcode.com/gh_mirrors/ip/iperf3-win-builds 想要准确测量网络带宽、排查网速问…...
终极Splide轮播组件路线图:从4.1.4到未来版本的升级指南与特性前瞻
终极Splide轮播组件路线图:从4.1.4到未来版本的升级指南与特性前瞻 【免费下载链接】splide Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependencies, no Lighthouse errors. 项目地址: https://gitcode.com/…...
深求·墨鉴(DeepSeek-OCR-2)效果展示:毛笔字春联识别+吉祥话语义分析
深求墨鉴(DeepSeek-OCR-2)效果展示:毛笔字春联识别吉祥话语义分析 1. 引言:当传统书法遇见现代AI 春节临近,家家户户都在准备贴春联。那些饱含祝福的毛笔字,是中国人心中最温暖的年味。但你是否想过&…...
csp信奥赛c++之字符数组与字符串的区别
csp信奥赛c之字符数组与字符串的区别 一、字符数组与字符串的区别(详细讲解) 在C(尤其信奥赛CSP常用环境)中,“字符数组”和“字符串”通常指两种不同的数据类型或存储方式: 特性字符数组 (char[])字符串…...
