vue nextTick 无法获取dom
什么是Vue.nextTick()??定义:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码;理解:nextTick(),是将回调函数延迟在下一次dom更新数据后调用,简单的理解是:当数据更新了,在dom中渲
什么是Vue.nextTick()??
定义:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码;
理解:nextTick(),是将回调函数延迟在下一次dom更新数据后调用,简单的理解是:当数据更新了,在dom中渲染后,自动执行该函数,
总结一下项目中遇到的问题
用vue qrcode 生成二维码插件的时候,由于页面的元素还没有更新。所以没有获取到dom元素
用$nextTick也无法获取到更新的dom元素。
产生原因分析:因为生成二维码的div是新加上的。不是原来的元素。所以无法获取更新。
解决办法:里面包一层setTimeout 。setTimeout异步,等所有的同步执行完毕后再执行
setTimeout,它的工作原理是这样的,当你定义setTimeout那一刻起(不管时间是不是0),js并不会直接去执行这段代码,而是把它扔到一个事件队列里面,当页面中所有同步任务都干完了以后,才会去执行事件队列里面的代码。
this.$nextTick(() => {
setTimeout(() => {
}, 0)
})
更多推荐
所有评论(0)