VueJs无法检测到数组的变化（数组变了没有重新渲染页面）

最新推荐文章于 2024-05-27 18:23:33 发布

_小小程序员_

最新推荐文章于 2024-05-27 18:23:33 发布

阅读量7k

点赞数

分类专栏： js 文章标签： vuejs 数组对象检测不到变化

本文链接：https://blog.csdn.net/qq_24520639/article/details/54016220

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

昨天在使用vue.js的时候遇到了一个非常奇怪的bug，贴出来跟大家分享一下(虽然问题解决了，但还是有点不理解）

hideChildren(childrenIds,index){
    //递归让该节点的所有子节点隐藏
    if(index!=null&&index!=''&&index!=-1){
        this.trace.spans[index].isShow=true;
        if(childrenIds!=null) {
            this.trace.spans[index].symbol = "+";
        }
    }
    if(childrenIds!=null){
          var spans=this.trace.spans;
          var ids=childrenIds.split(",");
          //首先把所有该子项
          for(var i=0;i<ids.length;i++){
              for(var j=0;j<spans.length;j++){
                  if(ids[i]===spans[j].spanId){
                      spans[j].isShow=false;
                      //children关闭自己的children
                      this.hideChildren(spans[j].children);
                      break;
                  }
              }
          }
          this.trace.spans=spans;
      }
},
showChildren(childrenIds,index){
    //递归让该节点的所有子节点隐藏
    if(index!=null&&index!=''&&index!=-1){
        this.trace.spans[index].symbol = "-";
    }
   if(childrenIds!=null){
        var spans=this.trace.spans;
        var ids=childrenIds.split(",");
        //首先把所有该子项
        for(var i=0;i<ids.length;i++){
            for(var j=0;j<spans.length;j++){
                if(ids[i]===spans[j].spanId){
                    spans[j].isShow=true;
                    break;
                }
            }
        }
       this.trace.spans=spans;
    }
}

（PS：排版有点丑）

下面讲重点：

功能：两个函数分别实现关闭和展开树形子节点

问题：结果很奇怪了：hideChildren（）函数执行成功，树形节点隐藏功能正常运行，showChildren（）函数执行成功，但是页面上没有任何变化。（要是说vue检测不到对象的变化，为什么同样的代码一个有效一个没有效呢）

百度了一下：Vuejs的一些总结第九点。vuejs检测不到直接索引设置元素，如vm.item[0]={};

通过这样解决了 vm.$set(key,value)

showChildren(childrenIds,index){
    //递归让该节点的所有子节点隐藏
    if(index!=null&&index!=''&&index!=-1){
        this.trace.spans[index].symbol = "-";
    }
   if(childrenIds!=null){
        var spans=this.trace.spans;
        var ids=childrenIds.split(",");
        //首先把所有该子项
        for(var i=0;i<ids.length;i++){
            for(var j=0;j<spans.length;j++){
                if(ids[i]===spans[j].spanId){
                    spans[j].isShow=true;
                    break;
                }
            }
        }
       this.trace.spans=spans;
       this.$set('trace',this.trace);
    }
}








问题是解决了，感觉还是听奇葩的，最终得出来一个结论，“vuejs的bug吧”，如果哪位小伙伴弄清楚了这其中的原理，请分享！