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

如图:

一:问题是:

我把数据处理后能console.log()打印出来,但是页面的内容不能同步的更新渲染;

二:要求:

在数组循环列表里面,我点击单个的item按钮时,需要实时加载进度条到90%,并改变item的flowStatus值同时在页面上渲染当前改变后的状态值。

三:方式:

用了$delete()先删除这个已经存在并且要改变的键值flowStatus;

this.$delete(flow,'flowStatus')

再$set()重新赋值flowStatus为我需要的状态值:

this.$set(flow,'flowStatus','0')

进度条加载一样。。。

四:代码

javascript 复制代码
        <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%

javascript 复制代码
    start(flow) {
      this.$nextTick(() => {
        this.$delete(flow,'flowStatus')          //先删掉对象里的flowStatus值
        this.$set(flow,'flowStatus','0')         //再新增flowStatus值为0  (第一个值为要改变的对象,第二个为要改的键名,第三个为改后的键值)
        if(flow.percentage < 100) {              //这是进度条的变化
          this.$delete(flow,'percentage')        //删掉对象里的percentage
          this.$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"

}...

]

相关推荐
用户6600676685391 分钟前
从送花表白实例读懂 JavaScript 对象字面量与代理模式
javascript
我是日安3 分钟前
从零到一打造 Vue3 响应式系统 Day 29 - readonly:数据保护实现
前端·javascript·vue.js
时代拖油瓶3 分钟前
我劝你必须知道——Intl.Segmenter
前端·javascript
韭菜炒大葱4 分钟前
对象字面量与JSON:JavaScript中最强大的数据结构
javascript
海在掘金611275 分钟前
从"万能函数"到"精准工具":泛型如何消除重复代码
前端
云心雨禅5 分钟前
DNS工作原理:从域名到IP
运维·前端·网络协议·tcp/ip·github
Dorian_Ov06 分钟前
Mybatis操作postgresql的postgis的一些总结
前端·gis
Moshow郑锴21 分钟前
从 “瞎埋点” 到 “精准分析”:WebTagging 设计 + 页面埋点指南(附避坑清单)
前端
非凡ghost32 分钟前
PixPin截图工具(支持截长图截动图) 中文绿色版
前端·javascript·后端
૮・ﻌ・40 分钟前
Vue2(一):创建实例、插值表达式、Vue响应式特性、Vue指令、指令修饰符、计算属性
前端·javascript·vue.js