vue中swiper组件使用axios动态获取数据，图片不显示、不轮播

前言

        个人案例记录，技艺不精，只做参考用。

原因

        swiper初始化在前，数据获取在后

        本人init()即拉去数据方法放在created中

        

解决方案：

<template>
  <div class="box">
    <swiper class="swiper-container">
      <swiper-slide v-for="(item, index) in mdv" :key="index">
        <img :src="item.coverUrl" alt="#" />

      </swiper-slide>
      <!-- 底部按钮 -->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>

  </div>
</template>

<script>
import Swiper from 'swiper';
import { getTraveller } from '@/api/traveller'
export default {
  data() {
    return {
      mdv: [], // 存放图片数据的数组
    }
  },
  mounted(){
    this.init();
    this.initSwiper()
  },
  methods: {
    init() {
      getTraveller().then(res => {
        this.mdv = res.data.data
      })
    },
    initSwiper() {
      setTimeout(() => {
        var mySwiper = new Swiper('.swiper-container', {
        spaceBetween: 0, // 图片之间的间距
        centeredSlides: true, // 居中还是从图1开始
        slidesPerView: 'auto', // 一屏幕显示几个? 数字或者默认  auto 自动。
        notNextTick: true, // true:加载后允许触发事件 false:加载后不可以触发事件  
        loop: true, // 循环播放
        initialSlide: 0, // 从第几个开始
        autoplay: {
          delay: 2000, // 等1秒下一个
          disableOnInteraction: false // 中间滑动一下，取消自动吗？
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }, // 下按钮
        speed: 800, // 滑动时候动画的速度
        paginationClickable: true, // 下面按钮让点吗

        watchSlidesProgress: true, // 开启这个参数来计算每个slide的progress
        watchSlidesVisibility: true,  // 先要开启watchSlidesProgress参数，如果开启watchSlidesVisibility，则会在每个slide增加一个指示该slide的progress值得classname
        observer: true,
        observeParents: true
      })
      }, 300)

    }

  }
}
</script>

参考文章：vue |通过swiper实现动态数据的简单轮播 - sanhuamao - 博客园 (cnblogs.com)