vue-awesome-swiper设置loop:true时动态改变轮播的图片列表时重新渲染swiper

<swiper :options="swiperOption" ref="mySwiper" v-if="swiperReset">
                <!-- 首页轮播广告图片 -->
          <swiper-slide  v-for="(item, index) in swiperList" :key="index">
            <img class="index_img" :src="item" /> 
          </swiper-slide>
          <div class="swiper-pagination"  slot="pagination"></div>
 </swiper>

由于循环播放时是在轮播图片的首尾各加上一个slide，且在swiperList发生变化时，渲染不到加上的slide，所以会出现首页往前翻页时显示的是之前缓存着的图片，解决的方法是在swiper组件上加上一个v-if。

this.swiperReset= false
this.$nextTick(() => {
this.swiperReset= true
})

这是因为在 v-if 切换的时候，其所在的元素及它的绑定数据和组件会先被销毁再重建。