Vue2.0 + Swiper 开发遇到的问题 -- 数据动态加载后无法轮播

安装vue里面的swiper

npm install vue-awesome-swiper --save

main.js文件中引入

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)

页面中使用

<template>
<swiper class="swiper">
        <swiper-slide v-for="items in BannersInfo" :key="items.index">
          <div class="banner-img">
            <img :src="items" alt>
          </div>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      
</template>
import Swiper from "swiper";

export default {
  name: "Index",
  data() {
    return {
      BannersInfo: [], //轮播
    };
  },
  methods: {
    getData() {
      let _this = this;
      getHomeList().then(res => {
		这里是重点
          setTimeout(() => {
            var swiper = new Swiper(".swiper", {
              // some swiper options/callbacks
              loop: true,
              observer: true, //修改swiper自己或子元素时，自动初始化swiper
              observeParents: true, //修改swiper的父元素时，自动初始化swiper
              autoplay: {
                delay: 3000, //秒
                stopOnLastSlide: false,
                disableOnInteraction: false //滑动不会失效
              },
              pagination: {
                el: ".swiper-pagination" // 左右滑动的导航栏dom
              },
              on: {
                slideChange() {
                  _this.thisPage = this.activeIndex + 1;
                }
              }
            });
          }, 0);
      });
    },
  },
  created() {
    this.getData();
  }
}