vue-awesome-swiper异步加载数据，初始化的loop不生效——解决及猜测

情景介绍

vue+typescript+vue-awesome-swiper项目，首页轮播使用vue-awesome-swiper，banner数据从服务器端加载。
数据加载须要时间，若是直接载入vue-awesome-swiper，结果是swiperOption配置的loop: true不生效：

swiperOption: {
    loop: true,
}

猜测

猜想缘由就是初始化的时候没有足够的元素swiper-slide，因此没有执行复制元素的操做，就没有loop。
为了验证这个猜想，作了一下几个尝试：

1. 初始化banner长度为1，服务器返回的长度为4，运行。

   结果是loop依然没有生效。
   ？loop没响应或者缺乏监听器observer

2. 加入observer: true属性进行监听，再运行。
   依然不生效。
   ？observer不生效
3. 浏览器控制台执行元素删除操做。

   滑块的页脚同时变化
   ！observer生效——loop不响应

结论

loop属性不是响应式的，数据变更以后不会自动初始化整个滑块

解决

开始的时候，想的办法是初始化设置init: false，获取数据以后再执行init()，能够解决该问题。
后来看了一篇文章，能够对数据长度作一个判断：

<swiper v-if="banner.length > 0" :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">

增长这个判断以后，loop的问题解决了。
缘由是只有banner.length > 0的时候，才会挂载swiper，只有挂在以后才会执行初始化的init操做，因此能够确保loop执行的时候，滑块元素swiper-slide是存在且完整的，完美解决！

结语

解决bug的友情连接～