当前位置: 首页 > news >正文

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响应式数据-修改对象的属性值,视图不更新

如图&#xff1a; 一&#xff1a;问题是&#xff1a; 我把数据处理后能console.log()打印出来&#xff0c;但是页面的内容不能同步的更新渲染&#xff1b; 二&#xff1a;要求&#xff1a; 在数组循环列表里面&#xff0c;我点击单个的item按钮时&#xff0c;需要实时加载进度…...

【OpenCV计算机视觉】图像处理——平滑

本篇文章记录我学习【OpenCV】图像处理中关于“平滑”的知识点&#xff0c;希望我的分享对你有所帮助。 目录 一、什么是平滑处理 1、平滑的目的是什么&#xff1f; 2、常见的图像噪声 &#xff08;1&#xff09;椒盐噪声 ​编辑&#xff08;2&#xff09; 高斯噪声 &a…...

C#编程报错- “ComboBox”是“...ComboBox”和“...ComboBox”之间的不明确的引用

1、问题描述 在学习使用C#中的Winform平台编写一个串口助手程序时&#xff0c; 在编写一个更新ComboBox列表是遇到了问题&#xff0c;出错的代码是 2、报错信息 CS1503 参数 2: 无法从“System.Windows.Forms.ComboBox”转换为“System.Windows.Forms.ComboBox” CS1503 …...

JAVA:访问者模式(Visitor Pattern)的技术指南

1、简述 访问者模式(Visitor Pattern)是一种行为型设计模式,允许你将操作分离到不同的对象中,而无需修改对象本身的结构。这种模式特别适合复杂对象结构中对其元素进行操作的场景。 本文将介绍访问者模式的核心概念、优缺点,并通过详细代码示例展示如何在实际应用中实现…...

YashanDB共享集群产品能力观测:细节足见功底

本文基于前泽塔数科研发总监-王若楠2024年11月在“2024年国产数据库创新生态大会”-“根”技术专场的演讲整理形成&#xff0c;主要对崖山共享集群YAC的架构、功能、高可用性、性能四大方面进行全面测试&#xff0c;并分享了测试环境和测试结论。 年初&#xff0c;基于某些商业…...

【Linux】—简单实现一个shell(myshell)

大家好呀&#xff0c;我是残念&#xff0c;希望在你看完之后&#xff0c;能对你有所帮助&#xff0c;有什么不足请指正&#xff01;共同学习交流哦&#xff01; 本文由&#xff1a;残念ing原创CSDN首发&#xff0c;如需要转载请通知 个人主页&#xff1a;残念ing-CSDN博客&…...

@FeignClient用于Nacos微服务间的接口调用

依赖&#xff1a;<!-- spring-boot启动依赖 --> <!-- 提供者 --> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- openFeign --> <…...

认识javascript中的模块化

什么是模块化&#xff1f; 将程序⽂件依据⼀定规则拆分成多个文件&#xff0c;拆分出来每个⽂件就是⼀个模块&#xff0c;模块中的数据都是私有的&#xff0c;模块之间互相隔离。如果不进行隔离&#xff0c;可能会造成模块间的变量定义有冲突&#xff0c;导致程序崩溃 为啥要使…...

容器设计模式:Sidecar

文章目录 容器设计模式&#xff1a;Sidecar 模式1. 什么是 Sidecar 模式&#xff1f;2. Sidecar 模式的原理2.1 工作机制2.2 常见用途 3. Sidecar 模式示例示例&#xff1a;日志收集 4. Sidecar 模式的架构图图例&#xff1a; 5. Sidecar 模式的优点6. Sidecar 模式的局限性7. …...

ensp 静态路由配置

A公司有广州总部、重庆分部和深圳分部3个办公地点&#xff0c;各分部与总部之间使用路由器互联。广州、重庆、深圳的路由器分别为R1、R2、R3&#xff0c;为路由器配置静态路由&#xff0c;使所有计算机能够互相访问&#xff0c;实训拓扑图如图所示 绘制拓扑图 给pc机配置ip地址…...

MATLAB图卷积神经网络GCN处理分子数据集节点分类研究

全文链接&#xff1a;https://tecdat.cn/?p38570 本文主要探讨了如何利用图卷积网络&#xff08;GCN&#xff09;对图中的节点进行分类。介绍了相关的数据处理、模型构建、训练及测试等环节&#xff0c;通过对分子数据集的操作实践&#xff0c;展示了完整的节点分类流程&#…...

Android-Glide详解

目录 一&#xff0c;介绍 二&#xff0c;使用 三&#xff0c;源码分析思路 四&#xff0c;with源码分析 五&#xff0c;模拟Glide生命周期管理 一&#xff0c;介绍 Glide目前是安卓最主流的加载图片的框架&#xff0c;也是源码最为复杂的框架之一。 要想完完全全吃透Glide的源…...

2.Nuxt学习 组件使用和路由跳转相关

组件定义和使用 普通组件的使用 在Nuxt的项目中&#xff0c;可以直接在components文件夹下建立组件 在页面中直接使用 无需引入 多层级组件的使用 我们有时候会需要多层级组件来简化代码结构 比如我们需要给Banner组件添加一个子组件 我们直接建立其名称的文件夹 写入子组…...

代码开发相关操作

使用Vue项目管理器创建项目&#xff1a;&#xff08;vue脚手架安装一次就可以全局使用&#xff09; windowR打开命令窗口&#xff0c;输入vue ui&#xff0c;进入GUI页面&#xff0c;点击创建-> 设置项目名称&#xff0c;在初始化git下面输入&#xff1a;init project&…...

动态导出word文件支持转pdf

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、功能说明二、使用步骤1.controller2.工具类 DocumentUtil 导出样式 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 例如&#xff…...

登陆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&#xff0c;想象自己站在它的右侧&#xff0c;按照从顶部到底部的顺序&#xff0c;返回从右侧所能看到的节点值。 数据约束 二叉树的节点个数的范围是 [ 0 , 100 ] [0,100] [0,100] − 100 ≤ N o d e . v a l ≤ 100…...

React自学:如何使用localStorage,以及如何实现删除笔记操作

1. 初始化notes 以下这段代码完成了这些操作&#xff1a; 调用 localStorage.getItem("notes") 从浏览器的本地存储中获取名为 “notes” 的数据。使用 JSON.parse 将获取到的字符串解析成数组。如果本地存储中没有 “notes” 数据&#xff08;返回值为 null&#…...

go语言使用websocket发送一条消息A,持续接收返回的消息

在Go语言中实现一个WebSocket客户端&#xff0c;可以使用gorilla/websocket这个非常流行的库来处理WebSocket连接。下面是一个简单的示例&#xff0c;展示了如何创建一个WebSocket客户端&#xff0c;向服务器发送消息"A"&#xff0c;并持续接收来自服务器的响应。 首…...

如何对小型固定翼无人机进行最优的路径跟随控制?

控制架构 文章继续采用的是 ULTRA-Extra无人机&#xff0c;相关参数如下&#xff1a; 这里用于guidance law的无人机运动学模型为&#xff1a; { x ˙ p V a cos ⁡ γ cos ⁡ χ V w cos ⁡ γ w cos ⁡ χ w y ˙ p V a cos ⁡ γ sin ⁡ χ V w cos ⁡ γ w sin ⁡ χ…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

手机平板能效生态设计指令EU 2023/1670标准解读

手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读&#xff0c;综合法规核心要求、最新修正及企业合规要点&#xff1a; 一、法规背景与目标 生效与强制时间 发布于2023年8月31日&#xff08;OJ公报&…...

Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案

在大数据时代&#xff0c;海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构&#xff0c;在处理大规模数据抓取任务时展现出强大的能力。然而&#xff0c;随着业务规模的不断扩大和数据抓取需求的日益复杂&#xff0c;传统…...

抽象类和接口(全)

一、抽象类 1.概念&#xff1a;如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象&#xff0c;这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法&#xff0c;包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中&#xff0c;⼀个类如果被 abs…...

论文阅读:LLM4Drive: A Survey of Large Language Models for Autonomous Driving

地址&#xff1a;LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂&#xff0c;正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...

0x-3-Oracle 23 ai-sqlcl 25.1 集成安装-配置和优化

是不是受够了安装了oracle database之后sqlplus的简陋&#xff0c;无法删除无法上下翻页的苦恼。 可以安装readline和rlwrap插件的话&#xff0c;配置.bahs_profile后也能解决上下翻页这些&#xff0c;但是很多生产环境无法安装rpm包。 oracle提供了sqlcl免费许可&#xff0c…...

Android写一个捕获全局异常的工具类

项目开发和实际运行过程中难免会遇到异常发生&#xff0c;系统提供了一个可以捕获全局异常的工具Uncaughtexceptionhandler&#xff0c;它是Thread的子类&#xff08;就是package java.lang;里线程的Thread&#xff09;。本文将利用它将设备信息、报错信息以及错误的发生时间都…...

webpack面试题

面试题&#xff1a;webpack介绍和简单使用 一、webpack&#xff08;模块化打包工具&#xff09;1. webpack是把项目当作一个整体&#xff0c;通过给定的一个主文件&#xff0c;webpack将从这个主文件开始找到你项目当中的所有依赖文件&#xff0c;使用loaders来处理它们&#x…...

精益数据分析(98/126):电商转化率优化与网站性能的底层逻辑

精益数据分析&#xff08;98/126&#xff09;&#xff1a;电商转化率优化与网站性能的底层逻辑 在电子商务领域&#xff0c;转化率与网站性能是决定商业成败的核心指标。今天&#xff0c;我们将深入解析不同类型电商平台的转化率基准&#xff0c;探讨页面加载速度对用户行为的…...