vue使用vue-awesome-swiper，輪播圖loop不管用

封裝組件如下swiper.vue

<template>
  <div class="wapper">
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide v-for="item in imgList" :key="item.id">
        <img :src="item.img" alt="">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
  import 'swiper/dist/css/swiper.css'
  import {swiper, swiperSlide} from 'vue-awesome-swiper'

  export default {
    name: 'Swiper',
    data() {
      return {
        imgUrl: require('../../../assets/imgs/ceshi.jpg'),
        imgList: [],
        swiperOption: {
          pagination: {
            el: '.swiper-pagination',
          },
          init: false,
          loop: true,
          autoplay: {
            delay: 5000,
            disableOnInteraction: false
          },
        },
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper;
      }
    },
    mounted() {
      this.img()
    },
    updated() {
      console.log(this.imgList);
      if (this.imgList.length > 1) {
        console.log(this.swiper);
        this.swiper.init();
      }
    },
    methods: {
      //獲取輪播圖
      img: function () {
        this.$post('Mall/banner')
          .then((response) => {
            console.log(response.obj)
            if (response.code == 1) {
              this.imgList = response.obj
            }
          })
      }
    },
    components: {
      swiper,
      swiperSlide
    }
  }
</script>
<style lang="stylus" scoped>
  .wapper
    width 100%;
    height 430px;

  .wapper swiper-slide
    width 100%;
    height 430px;

  .wapper img
    width 100%;
    height 430px;

</style>

main.js

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

安裝

npm install vue-awesome-swiper