使用vue深度开发数组对象多层嵌套时视图不更新

news/2024/7/10 22:39:47 标签: vue, javascript, vue.js, es6

当我们开发的时候,有一些数据是对象里面嵌套数组,数组里面嵌套对象,数据结构很复杂的时候,而且在你循环出来一个select下拉选择框的时候,不让联动的时候这时候就很难搞了结构大概是这样子的
在这里插入图片描述
渲染到页面上是这样子的
在这里插入图片描述
点击改变事件的时候,只让上边的改变,下边的不会改变,但是我做的时候就联动起来了,当我给那个数组一个布尔值的时候,值改变了,但是视图没更新,这就是因为数据结构太复杂了,所以一直渲染不到页面上,查了好多资料才知道,原来就是多层嵌套导致的
解决办法就是

// 用vue的$set方法,监听你添加到这个数字里面的show数据。默认值是true(根据需要自己写,你也可以自己写一个false)。
// this.dabuleList[index]是从后台接口调过来赋值给data里面获取的数据,.detailList[indexcin]是这个数组里面的另一个数组,show是我自己添加到这个数据里面的。
this.$set(this.dabuleList[index].detailList[indexcin],"show",true)
// 这是数据这个结构
 this.dabuleList.forEach((element,index) => {
   getMatch += element.match;
   getNotMatch += element.notMatch;
   getNotApplicable += element.notApplicable;
   getImmediateRectify += element.immediateRectify;
   getDeadlineRectify += element.deadlineRectify;
   element.detailList.forEach((detailListItem,indexcin) => {
// 因为你要监听这个数组里面的show的数据,所以就写到这里     
this.$set(this.dabuleList[index].detailList[indexcin],"show",true)
     detailListItem.show = true
     detailListItem.fileList.forEach(elementItem => {
       elementItem.uid = elementItem.id
       elementItem.name = elementItem.fileName
       elementItem.url = elementItem.filePath
       elementItem.status = 'done'

     })
   })
 })

当你改变的时候就可以根据下标(index)那么写了,这样就不会联动了,当然了,v-show必须是动态的,如果取data里面的值。就联动了。

 handleChangeselect(value,itemcin,indexcin,index) {
   if (value == '0') {
     this.dabuleList[index].detailList[indexcin].show=false;
   } else if (value == '1') {
      this.dabuleList[index].detailList[indexcin].show=true;
   } else {
     this.dabuleList[index].detailList[indexcin].show=true;
   }
 },

http://www.niftyadmin.cn/n/763872.html

相关文章

pythonconvert函数_【转】Python内置函数(5)——bin

英文文档: bin(x) Convert an integer number to a binary string. The result is a valid Python expression. If x is not a Python int object, it has to define an __index__() method that returns an integer. 说明: 1. 将一个整形数字转换成二进…

python数据清洗语句_【python】数据清洗

1.处理缺失值 判断是否含缺失值/统计缺失值 #判断 ## 判断列是否存在na df.isnull().any() #返回bool df.notnull() #统计 df.isnull().sum() df[col_name].value_counts(dropnaFalse) #分类汇总该列并统计缺失值 筛选所有含缺失值的表格 df[df.col_name.isnull()] 删除含缺失值…

使用vue点击一个事件就复制一个结构出来。

今天遇到一个需求&#xff0c;点击一个按钮的时候&#xff0c;需要把一个页面的结构复制出来&#xff0c;左思右想&#xff0c;原来是这样子的。 首先你得明白你要复制哪一份结构&#xff0c;找到的话就把一个结构用v-for循环。 <div v-for"(item, index) in arr"…

git bash here创建项目无法选择m_超实用 Git 使用方式介绍

都说程序员若是不知道 GitHub 就不是一个合格的程序员&#xff0c;其实这话说的过分了&#xff0c;不知道就学嘛&#xff0c;今天我们就来说说 Git 和 GitHub 到底是什么。我们在开发软件的时候&#xff0c;常常是需要多人协作完成&#xff0c;这时候我们就需要对我们的代码进行…

vue使用ant design vue的collapse

在使用折叠面板的时候&#xff0c;应该是点击以后就会关闭一个面板&#xff0c;但是有的需要点击俩下&#xff0c;才可以展开&#xff0c;就是因为v-modal影响了这个 v-modal改成activeKey <a-collapse accordion change"changePanel" activeKey"activeKey&…

qcustomplot绘制动态曲线_Qt编写的项目作品17-自定义曲线图柱状图

一、功能特点可设置X轴Y轴范围值。可设置背景颜色文本颜色网格颜色。可设置三条曲线颜色颜色集合。可设置是否显示定位十字线,可分别设置横向和纵向。可设置十字线的宽度和颜色。可设置是否显示数据点以及数据点的大小。可设置是否填充背景形成面积图。可设置模式-拖动缩放等。…

使用ant-design-vue(select)遇到的问题,解决重置之后清空值

当你的select-option是循环出来的时候&#xff0c;你点击清空以后这个值是不会清空的&#xff0c;当你使用组件自带的api – allowClear的时候&#xff0c;你会发现清空以后是undefined&#xff0c;所以当你清空的时候&#xff0c;你可以在select标签上使用v-model。 <a-se…

js indexOf的使用

今天遇到一个需求&#xff0c;俩个字符串第一个字符串是‘检查’&#xff0c;第二个字符串是‘检查单的问题啊啊啊啊啊’&#xff08;这俩个字符串是我瞎写的&#xff09; 我要的是如果这个字符串里面有检查这俩个字就给我返回来。 因为是获取到input框里边输入的值。所以就判断…