Vue项目使用vue-awesome-swiper做轮播图时，异步调用数据时导致图片不能滑动的解决方法

Vue项目使用vue-awesome-swiper做轮播图时，轮播图片一般通过ajax后端获取，循环展示时会出现循环轮播失效的问题。原因是因为swiper提前初始化了，那个时候还没有数据，当数据调出来时已经没用了。我们住需要在swiper组件上用v-if就可以解决。

<template>
    <swiper :options="swiperOption" v-if="loopLists.length > 0">
    <swiper-slide v-for="slide in loopLists" :key="slide.id">
        <p>{{slide.text}}</p>
    </swiper-slide>
  </swiper>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
    components: {
    swiper,
    swiperSlide
  },
  data(){
      return {
          loopLists:[],
          swiperOption: {
          loop: true,//环路
          autoplay:true,//自动轮播
        },
      }
  },
 mounted(){
      this. getLoopData()
  },
methods:{
    //获取轮播数据
    getLoopData() {
        this.$axios.get('/list').then((res)=>{
            console.log(res.data)
            this.loopLists = result.data;
        })
    },
}
}
</script>