基于swriper4.的vue-awesome-swiper 插件异步数据加载的loop循环问题

<template>
<div class='recommend'>
    <swiper :options="swiperOption">
        <swiper-slide v-for="(slid, index) in data" :key="index">
        <img :src="slid" alt="">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
</div>
</template>
<script >
export default{
    data() {
      return {
          data:[],
          ok:false,
        swiperOption:{
            autoplay:{
                delay: 2000,
                stopOnLastSlide: false,
                disableOnInteraction: false,
            },
            loop : true,
            pagination: {
              el: '.swiper-pagination'
            }
          }
        
      }
    },
    mounted(){
        this.$axios.get("http://www.xxxx.php")
        .then(res=>{
            return res.data
        })
        .then(data=>{
            this.data=data.chengpinDetails[0].img  

        })
        .catch(error=>{
            console.log(error)
        })
    }
}
</script>

按照GitHub上vue-awesome-swiper的文档使用,发现loop功能无效,修改如下

<template>
<div class='recommend'>
    <swiper :options="swiperOption"
    v-if='ok'>
        <swiper-slide><img :src="data[0]" alt=""></swiper-slide>
        <swiper-slide><img :src="data[1]" alt=""></swiper-slide>
        <swiper-slide><img :src="data[2]" alt=""></swiper-slide>
        <swiper-slide><img :src="data[3]" alt=""></swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
</div>
</template>
<script >
export default{
    data() {
      return {
          data:[],
          ok:false,
        swiperOption:{
            autoplay:{
                delay: 2000,
                stopOnLastSlide: false,
                disableOnInteraction: false,
            },
            loop : true,
            pagination: {
              el: '.swiper-pagination'
            }
          } 
      }
    },
    mounted(){
        this.$axios.get("http://www.xxx.php")
        .then(res=>{
            return res.data
        })
        .then(data=>{
            if(!data){return}
            this.ok=true
            this.data=data.chengpinDetails[0].img

        })
        .catch(error=>{
            console.log(error)
        })
    }
}
</script>

备注:如果不用v-if进行条件渲染,在下次循环时会出现一页空白,然后直接跳转到下一页.本例子有4条数据.