vue-awesome-swiper下设置loop:true不能循环播放

Question

使用vue-swiper做循环设置了loop:true,却没有反应

<template>
  <div class="banner">
    <swiper
      :options="swiperOption"
      ref="mySwiper"
    >
      <!-- slides -->

      <swiper-slide v-for="list in bannerList">
        <img
          :src="list.imageUrl"
          alt=""
        >
      </swiper-slide>

      <!-- Optional controls -->
      <div
        class="swiper-pagination"
        slot="pagination"
      ></div>
      <div
        class="swiper-button-prev"
        slot="button-prev"
      ></div>
      <div
        class="swiper-button-next"
        slot="button-next"
      ></div>
      <div
        class="swiper-scrollbar"
        slot="scrollbar"
      ></div>
    </swiper>
  </div>
</template>
<script>
const axios = require("axios");
export default {
  name: "banner",
  data() {
    return {
      swiperOption: {
        loop: true,
        speed: 900,
        notNextTick: true,
        autoplay: true,
        preloadImages: false
        // some swiper options/callbacks
        // 所有的参数同 swiper 官方 api 参数
        // ...
      },
      bannerList: [] //banner列表
    };
  },
  mounted() {
    var _this = this;
    axios
      .get("http://192.168.1.30:3000/banner")
      .then(function(response) {
        // handle success
        console.log(response);
        _this.bannerList = response.data.banners;
        console.log(_this.bannerList);
      })
      .catch(function(error) {
        // handle error
        console.log(error);
      })
      .then(function() {
        // always executed
      });
  },
  
};
</script>
<style scoped>
img {
  width: 100%;
}
</style>

这样没反应，然后自己也查了，说给v-for的父元素加 v-if="bannerList.length>0"有用，但是！！我加了之后整个轮播图列表没有渲染出来，请问怎么才能循环轮播？
请大佬解答下，谢谢！！！！！！！！！

Answer 1

swiper里面的ref值改成swiperOption, 加上v-if='bannerLeft.length>0'就可以了