vue $refs报错的解决办法：1、打开相应的代码文件，然后加上“this.$nexttick();”；2、在mounted()钩子函数中调用即可。
本教程操作环境：windows7系统、vue2.5.17版，dell g3电脑。
【相关文章推荐：vue.js】
项目开发中遇到，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()用于延迟执行一段代码。
以上就是如何解决vue $refs报错问题的详细内容。