vue$refs报错怎么办-创新互联
这篇文章给大家分享的是有关vue $refs报错怎么办的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
10年的阳新网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。网络营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整阳新建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。成都创新互联从事“阳新网站设计”,“阳新网站推广”以来,每个客户项目都认真落实执行。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报错怎么办”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
当前标题:vue$refs报错怎么办-创新互联
分享地址:http://myzitong.com/article/dsgjje.html