13518219792
这篇文章给大家分享的是有关vue $refs报错怎么办的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
创新互联专注于沙依巴克网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供沙依巴克营销型网站建设，沙依巴克网站制作、沙依巴克网页设计、沙依巴克网站官网定制、微信小程序开发服务，打造沙依巴克网络公司原创品牌,更为您提供沙依巴克网站排名全网营销落地服务。
vue $refs报错的解决办法：1、打开相应的代码文件，然后加上“this.$nextTick();”；2、在mounted()钩子函数中调用即可。
项目开发中遇到，cannot read property ‘style’ of undefined的问题。我是怎么解决的，不多说，直接贴代码。
created() {
this.getAddBG();
},
methods: {
getAddBG() {
let config = {
service: "200017",
h6Type: "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报错怎么办”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
