在做实例的时候遇到一个问题,在获取后台数据之后,要将数据遍历到轮播,轮播使用的是Swiper。
在获取轮播数据之后就开始创建swiper实例,然后想着就能直接实现,可问题就出来了,这时候虽然轮播的样子出现了,但是功能没有成功。
原因
在watch中添加了监听对象之后就创建轮播实例,这时候虽然监听到了数据的改变,但是DOM更新是异步的,此时去创建轮播实例会较早与DOM更新。
解决
既然问题出现在创建轮播实例的时间上,那直接使用定时器能行吗?答案是可行的,但是会有一个小问题,就是你不知道如何定下时间,这个时间可能会有误差。因此在找了api之后,看到了nextTick, 先看一下介绍:
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
这样一来就不用在使用什么定时器了,直接使用即可
this.$nextTick(() =>