vue中使用轮播图插件vue-awesome-swiper 循环轮播不起作用问题解决

在vue项目中经常会用轮播图，我一般用vue-awesome-swiper这个插件。我们轮播图片一般通过后端获取，循环展示，但会出现循环轮播失效的问题。原因是循环还没有完的时候swiper组件运行冲突出错导致的，在swiper组件上对数据价格v-if就可以解决。代码如下：

<template>
  <div class="banner">
    <swiper v-if="bannersInput.length>1" :options="SwiperOption">
      <swiper-slide v-for="(item,index) in bannersInput" :key="index">
        <img :src="item" alt="">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
import 'swiper/dist/css/swiper.min.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'Home',
  data () {
    return {
      SwiperOption:{
        loop:true,
        autoplay:true,
        observer:true,//修改swiper自己或子元素时，自动初始化swiper 
        observeParents:true,//修改swiper的父元素时，自动初始化swiper 
        autoplay: {
        　　delay: 2000,
　　        disableOnInteraction: false   // 手动滑动后继续自动播放
    　　 },
        pagination:{
          el:".swiper-pagination",
        }
      }
    }
  },
  //父级传递数据
  props:{
    bannersInput:{
      default:function(){
        return [];
      }
    }
  }
}
</script>

<style scoped>
img{
  width: 100%;
  height: 200px;
}
</style>