Vue+Swiper动态获取数据，不报错，不能轮播，只显示第一张

Vue项目使用swiper做轮播图时，异步调用数据时导致图片不能滑动的解决方法
因为swiper提前初始化了，那个时候还没有数据，当数据调出来时已经没用了，所以有以下几个解决方法：
1、在数据调用结束后再进行swiper初始化

api.ajax({...}, function(...) {
    ... // 赋值代码
    that.$nextTick(function () {
        that.swiperInit()
    })
})
这里还要用到$nextTick,它会在数据变化以后，DOM更新以后进行回调函数

2、如果不是轮播的情况下呢，直接在初始化时加上observer

（修改swiper自己或子元素时，自动初始化swiper）、 observeParents

（修改swiper的父元素时，自动初始化swiper）这两个参数就行了，会在数据变化时，再帮你初始化一次

image.png

3、加载组件时加v-if判断：【推荐】

image.png

原文地址： vue+swiper不能轮播，不报错，只显示第一张图