Vue项目中使用swiper时的loop:true失效

问题描述：

在写vue项目的时候轮播用到swiper插件，里面有一个loop属性设置为true时，会循环轮播，一开始是自己本地模拟的数据是可以实现的，但是当调用接口获取来的数据发现并不能循环播放

原因：

本地模拟的假数据是一直存在的，而后台获取的数据，页面dom一开始渲染的时候数据是为空的，所以导致不能循环播放

解决办法：

当获取到数据的时候再渲染dom生成即可。
这里加一个判断 v-if="homeData[0]"

<swiper :options="swiperTopOption" ref="swiperTop" v-if="homeData[0]"> 
    <swiper-slide  
        v-for='(item,index) in homeData[0]'
        :key="index" class="swiper-banner"> 
        <img @click="goInto(item.id)" :src="item.imgUrl">
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>                              
</swiper>