vue輪播，vue-awesome-swiper動態數據渲染，loop無效，輪循無效

解決辦法：在渲染數組數據前。判斷是否爲空 css

v-if="slideList.length>1"

<template>
  <div class="banner_swiper" >
    <swiper v-if="slideList.length>1" :options="swiperOption" ref="mySwiper" style="height:100%;" >
      <!-- slides -->
      <swiper-slide v-for="(item,index) in slideList" :key="index"><img :src="item.filePath"></swiper-slide>
      <!-- <swiper-slide><img src="../../assets/images/banner2.png"></swiper-slide> <swiper-slide><img src="../../assets/images/banner3.png"></swiper-slide> -->
      <!-- Optional controls -->
      <div class="swiper-pagination" slot="pagination"></div>
      <!-- <div class="swiper-button-prev" slot="button-prev"></div> <div class="swiper-button-next" slot="button-next"></div> -->
    </swiper>
  </div>
</template>
<script>
// require styles
import 'swiper/dist/css/swiper.css' import { swiper, swiperSlide } from 'vue-awesome-swiper' import {getHomeInfo} from '../../assets/js/api.js'; export default { props: ["slideList"], data() { return { swiperOption: { observer:true,//修改swiper本身或子元素時，自動初始化swiper
 observeParents:true,//修改swiper的父元素時，自動初始化swiper
 autoplay: { delay: 4000,//1秒切換一次
 }, initialSlide :0, loop : true, pagination: { el: '.swiper-pagination', }, // navigation: {
          // nextEl: '.swiper-button-next',
          // prevEl: '.swiper-button-prev',
          // },
 } }; }, computed: { swiper() { return this.$refs.mySwiper.swiper } }, components: { swiper, swiperSlide }, mounted() { // console.log(
    // 'This is current swiper instance object', this.mySwiper, 
    // 'It will slideTo banners 3')
    // this.mySwiper.slideTo(3, 1000, false)
 }, methods: { } }; </script>
<style> .banner_swiper{width:100%;height:auto;} .swiper-pagination-bullet-active{background-color:#ff450e;}
</style>