美文网首页每天学点新东西
2018-03-06 vue中 深层数据改变 dom没有重新渲染

2018-03-06 vue中 深层数据改变 dom没有重新渲染

作者: 山豆山豆 | 来源:发表于2018-03-06 11:16 被阅读15次

    今天刚刚 解决了一个问题 先大概简单说一下,后期详细说

    比如vue中 数据和DOM 双向绑定 ,数据的改变会让 dom重新渲染。
    但是如果是 层级比较深的 json 对象格式的 数据 深层次的 改变 并不会 导致dom重新渲染。
    所以会比较 着急。

    今天 我作一个 二维数组 的层级 条件 显然的时候 遇到了这样一个问题。用户点击操作正确。双向绑定的数据也改变了。。但是就是反应不到 dom上 ,

    这是这时候 我的解决办法是 让 层级深入 的数据改变 -> 触发 第一层的数据改变 vue可以容易的检测到 收测数据改变 然后重新 根据数据 渲染dom 。从而决绝这个歌问题。


    image.png
     //判断是否显示
          addItemIsShow() {
            let that =this;
            var l=this.qnaire.allQuestions.length;
            for (let i = 0; i < this.qnaire.allQuestions.length; i++) {
                  for (let m = 0; m < this.qnaire.allQuestions[i].length; m++) {
                    this.domRander=true;
                    this.qnaire.allQuestions[i][m].isShow=false;
                    if(this.qnaire.allQuestions[i][m].hasOwnProperty('deps')){
                      
                      let strArr = this.qnaire.allQuestions[i][m].deps[0].split('/');
                      if(this.qnaire.allQuestions[i][m].category==2&&this.ansObj[strArr[0]].includes(strArr[1])){
                        this.qnaire.allQuestions[i][m].isShow=true;
                      }
                      if(this.ansObj[strArr[0]]==strArr[1]){
                        this.qnaire.allQuestions[i][m].isShow=true;
                       
                      }  
                    }else{
                        this.qnaire.allQuestions[i][m].isShow=true;
                    }    
                  }
                   this.domRander=false;
            }           
           
          },
    

    相关文章

      网友评论

        本文标题:2018-03-06 vue中 深层数据改变 dom没有重新渲染

        本文链接:https://www.haomeiwen.com/subject/llylfftx.html