vue中使用$refs 报错怎么解决?

vue中使用$refs 报错怎么解决?下面本篇文章给大家介绍一下Vue使用 $refs 报错的解决方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

项目开发中遇到,cannot read property ‘style’ of undefined的问题。我是怎么解决的,不多说,直接贴代码。

created() {
  this.getAddBG();
},
methods: {
  getAddBG() {
    let config = {
      service: "200017",
      h5Type: "activity"
    };
    this.$http.featchH5Post(config).then(res => {
      let list = res.data.data.advertiseList;
      list.forEach(item => {
        this.$refs[
          item.name
        ].style.backgroundImage = `url(${item.defaultPicture})`;
      });
    });
  }
}

解决办法:

第一种方法:加上this.$nextTick();

created() {
  this.$nextTick(() => {
    this.getAddBG();
  });
}

第二种方法:在mounted()钩子函数中调用。

mounted() {
  this.getAddBG();
}

调查分析原因:

1、先从vue生命周期与Vue.nextTick()说起。

created()钩子函数执行的时候DOM并未进行任何渲染,此时不能进行DOM操作。

在Vue生命周期的created()钩子函数进行DOM操作一定要放在Vue.nextTick()的回调函数中。

mounted()钩子函数执行时所有的DOM挂载和渲染都已经完成,此时在该钩子函数中进行任何DOM操作都不会有问题。

2、Vue官方文档的解释。

Vue异步执行DOM更新。只要观察到数据变化,Vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。如果同一个watcher被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作上非常重要。然后在下一个事件循环tick中,Vue刷新队列并执行实际(已去重)工作。Vue在内部尝试对异步队列使用原生的Promise.then和MessageChannel,如果执行环境不支持,会采用setTimeout(fn, 0)代替。

Vue.nextTick()用于延迟执行一段代码。

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是vue中使用$refs 报错怎么解决?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏