共计 733 个字符，预计需要花费 2 分钟才能阅读完成。
情景介绍
vue+typescript+vue-awesome-swiper 项目，首页轮播使用 vue-awesome-swiper，banner 数据从服务器端加载。数据加载需要时间，如果直接载入 vue-awesome-swiper，结果是 swiperOption 配置的 loop: true 不生效：
swiperOption: {
loop: true,
}
猜想
猜测原因就是初始化的时候没有足够的元素 swiper-slide，所以没有执行复制元素的操作，就没有 loop。为了验证这个猜测，做了一下几个尝试：
初始化 banner 长度为 1，服务器返回的长度为 4，运行。结果是 loop 依然没有生效。？loop 没响应或者缺少监听器 observer
加入 observer: true 属性进行监听，再运行。依然不生效。？observer 不生效
浏览器控制台执行元素删除操作。滑块的页脚同时变化！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 的友情链接～
