vue 新增属性的数据变化时,视图不能实时更新

我有这样一个父列表,点击展开,会请求该项的字列表,并显示这个字列表。

我需要一个属性来控制,这个展开和收起,所以在请求父列表时,给父列表添加了opens属性,

我是这样添加的。

let relalist1 = res.data.contentFiles
for(let i=0; i<relalist1.length; i++){
relalist1[i].opens = false;
this.relativelistJ=relalist1;
}
 
,嗯,就是这句话relalist1[i].opens = true;
在点击展开时,我将该opens属性改为false。
this.relativelistJ
[i].opens = true;
 
这样,我自己想当然的是可以执行的,可是并没有反应,我打印出改变后的值,确实是已经改变了,但是页面上并没有实时更新这个值。
 
后来,终于知道可以使用set了。我就在改变值的时候 用了set。
 
this.$set(this.relativelistJ[x],'opens',true)
 
嗯,这样还是不行,可能有点智障了吧。因为刚学习vue,什么都不晓得。就瞎试,然后,把新增属性时,也使用set方法,就可以实现页面的实时更新了。
 
我的例子。
 
页面结构:
 
新增属性:
 
 
改变新增属性:
 
 
 
嗯,问题解决了,但是原理性的东西还是比较模糊。大神们,可以给我留言指导,非常感谢。
 
 
 
 
 
 
 
 
原文地址:https://www.cnblogs.com/ellenbaby/p/9149346.html