vue--$nextTick()使用

html：

<div id="div" v-if="showDiv">这是一段文本</div>

<button @click="getText">获取div内容</button>

js：

data: {

showDiv: false

},

methods: {

getText: function() {

        this.showDiv = true;

会抛出一个错误： cannot read property 'innerHTML' of null;这里涉及到一个重要的概念： 异步更新队列。

Vue在观察到数据变化时并不是直接更新DOM，而是开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。在缓冲时会去除重复数据，从而避免不必要的计算和DOM操作。然后，在下一个事件循环tick中，Vue刷新队列并执行实际工作。

     ／／直接取报错，还没有创建div，如果不是v-if  是 v-show的话，不报错

   ／／   var text = document.getElementById('div').innerHTML;

      ／／    console.log(text);

   // 等待dom更新完成后执行回调 

     this.$nextTick(function() {

          var text = document.getElementById('div').innerHTML;

          console.log(text);

     });

}

}

实际使用遇到的bug：

elemntUI的分页在ie下跳转至——页 ，前端分页时 只能执行一次，后面修改页数 不更行dom

<el-pagination @size-change="handleSizeChange" @current-change="currentChange" :current-page="page" :page-size="1" layout="prev, pager, next, jumper" :total="total"  :key="timeStrap"> </el-pagination>

 

return{

page:1,

timeStrap:'',

}

methods:{

currentChange(currentPage){

   this.page=currentPage;

  this.$nextTick(()=>{this.timeStrap=new Date().getTime();})

}

outterTabClick(tab){

}

   this.page=1;

   this.$emit('update:activeName',tab.name)

},

innerTabClick(){

}

 this.page=1;

}

},

computed:{

   index(){ return this.page-1;},

activeNameModel:{

       get(){

    return  this.activeName;

    },

   set(val){//子组件传父组件语法糖update

     this.$emit('update:activeName',val)

    }

  },

 distrustIncItem(){

    if(this.distrustIncList){

      return this.distrustIncList.length?(this.distrustIncList[this.index]?this.disrusIncList[this.index]:{}):{};

     }

  return {};

  },

total(){

 if(this.activeName==='first'){return this.distrustIncList.length?this.distruIncList.length:0;}else if(this.activeName==='second'){

      if(this.activeHireName==='hirerJudgeDocs'){return this.hirerJudgeDocsListCount;}else         if(this.activeHireName=='hirerSessionDocs'){return this.hirerSessionDocsListCount;}else if(this.activeName==='third'){

       if(this.activeOtherName==='judgeDocs'){return  this.judgeDocsListCount;}else if(this.activeOtherName==='executedInc'){

       return  this.extcutedIncListCount;

     }else if(this.activeOtherName==='sessionDocs')){return  this.sessionDocs'ListCount;}else if(this.activeOtherName==='noti ceDocs')){return  this.noticeDocsListCount;}

}

}

}

}