美文网首页每天学点新东西
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