解决Vue中使用swiper4无法循环轮播

<div class="wrap">
        <swiper :options="bannerSwiper" ref="bannerSwiper" class="swiper" v-if='bannerData.length>0'>
          <swiper-slide v-for="(item,index) in bannerData" :key="index">
            <div class="left">
              <p class="l_title">{{item.l_title}}</p>
              <p class="title">{{item.title}}</p>
              <p class="name">{{item.name}}</p>
              <button @click="gooutreach(item.path,item.id)">Read More</button>
            </div>
            <div class="right">
              <img :src="item.img" alt />
            </div>
          </swiper-slide>
        </swiper>
     <div class="banner-swiper-pagination" slot="pagination"></div>
</div>

swiper里面的ref的值必须和：options的值是同一个，然后加 “v-if='bannerData.length>0'”判断。bannerData为数据数组。

export default {
  data() {
    return { 
        bannerSwiper: {
            loop:true,
            autoplay: {
              delay: 3000,
              disableOnInteraction: false
            },
            pagination: {
              el: ".banner-swiper-pagination",
              clickable: true
            },
            speed: 1000,
            effect: "fade",
            slidesPerView: 1
          },
        }
    }
}