在Vue中使用swiper时，轮播页面一直卡在某个页面轮播的解决办法

一. 问题

Vue项目中使用了vue-awesome-swiper轮播插件，配置好一切参数后，出现了一个问题，轮播图一直卡在第二页滑动。

轮播组件参数如下：

  data() {
    return {
      swiperOption: {
        pagination: {
          el: '.swiper-pagination',
          bulletClass : 'my-bullet-swiper', // 自定义设置默认类名
          bulletActiveClass: 'my-bullet-active-swiper', // 自定义滑块活跃类名
        },
        loop: true, // 无缝循环
        autoplay: {
          disableOnInteraction: false, // 用户手动操作轮播后，重新开始自动播放
        },
        direction: 'horizontal', // 水平滑动
        slidesPerView: 'auto',
        centeredSlides: true, // 居中显示                                     
        spaceBetween: 10, // 左右间距10
        loopedSlides: 3, // 在loop模式下使用slidesPerview:'auto'，还需使用该参数设置所要用到的loop个数(一般设置大于可视slide个数2个即可)
        preventClicksPropagation : false, // 阻止事件冒泡
        preventClicks : false, // 阻止触摸跳转
        observer:true,//修改swiper自己或子元素时，自动初始化swiper 
        observeParents:true,//修改swiper的父元素时，自动初始化swiper
      }
    }

展示轮播的页面引用轮播组件如下： swiperList为展示页面向服务器请求参数以后向轮播组件传递的数组

<!-- 轮播图部分 -->
<swiper-image :swiper-list="swiperList"></swiper-image>

效果如下：（一直卡在第二张图片轮播，手动去滑也是一直卡在第二张）

二. 解决办法

页面请求数据的时候有延迟，所以传递给轮播组件的swiperList数组可能是不完全的数据，当完全拿到数据的时候再渲染轮播组件

<!-- 轮播图部分 -->
<swiper-image :swiper-list="swiperList" v-if="swiperList.length > 0"></swiper-image>

问题得到了解决（完）