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