脚本宝典收集整理的这篇文章主要介绍了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的友情链接～

脚本宝典总结

以上是脚本宝典为你收集整理的vue-awesome-swiper异步加载数据，初始化的loop不生效——解决及猜想全部内容，希望文章能够帮你解决vue-awesome-swiper异步加载数据，初始化的loop不生效——解决及猜想所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。