vue-swiper

关于在vue中使用swiper无法loop播放的问题

<template>
  <div>
      <swiper :options="swiperOption" v-if='img.length>0'>
          <swiper-slide  v-for="(slide, index) in img" class='swiper' :key='index'>
            <img :src="slide.path" alt="" class="img-slide"/>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
  </div>
</template>

<script>
    import {swiper} from '../api/index'
    export default {
        data() {
        return {
            img:[],
            swiperOption: {
                pagination: {
                    el: '.swiper-pagination',
                },
                observer:true,//修改swiper自己或子元素时，自动初始化swiper 
　　			observeParents:true,//修改swiper的父元素时，自动初始化swiper 
                autoplay:true,
                loop:true,
                paginationClickable :true
            }
        }
        },
        async created(){
            this.img = (await swiper()).data
        },
        mounted(){

        }
    }
</script>

<style>
    .swiper-slide{
        height:180px;
        background: pink;
    }
    .img-slide{
        width:100%;
        height:100%;
    }
</style>

在vue中使用swiper时如果需要循环遍历swiper组件 则需要在最外层swiper标签中判断循环的数据是否存在