vue中使用swiper插件时动态绑定图片数据无法滑动或白屏

一、原因

使用静态图片是没问题的，但是使用接口返回的图片数据去绑定swiper就会出现无法滑动或则白屏的问题，原因是swiper提前初始化了，获取的图片数据还未返回。

二、解决

（1）方法一、使用$nextTick，在数据更新后在初始化swiper

const vm = this;
vm.$nextTick(function () {
        vm.swiperInit()
})

                swiperInit(){
                    // 轮播图
                    var mySwiper = new Swiper('.swiper-container', {
                        loop: true, // 循环模式选项
                        autoplay: 2000,
                        // 如果需要分页器
                        // pagination: '.swiper-pagination',
                    })
                }

（2）方法二、添加两个属性observeParents和observer

// 轮播图
                    var mySwiper = new Swiper('.swiper-container', {
                        loop: true, // 循环模式选项
                        autoplay: 2000,
                        // 如果需要分页器
                        // pagination: '.swiper-pagination',
                        observeParents:true,   ///修改swiper自己或子元素时，自动初始化swiper
                        observer:true, //修改swiper的父元素时，自动初始化swiper
                        
                    })

（3）方法三、在update中初始化 swiper