vue中使用$nextTick刷新页面

2020-05-18  本文已影响0人  顺小星

data中定义timer与控制刷新的变量showView

data() { 
  return {
     timer: '',
     showView: true, // 用于点击当前页的router时,刷新当前页
  };
},

methods中定义刷新函数:

refreshView() {
        this.showView = false // 通过v-if移除router-view节点
        this.$nextTick(() => {
          this.showView = true // DOM更新后再通过v-if添加router-view节点
        })
},

created中定义定时刷新的timer

this.timer = setInterval(() => {
        this.refreshView()
      }, 10000)

beforeDestroy中销毁定时器:

beforeDestroy() {
      clearInterval(this.timer);
    },

最后在要刷新的dom元素上,绑上刷新变量showView

v-if="showView"
上一篇下一篇

猜你喜欢

热点阅读