vue-awesome-swiper異步加載數據，初始化的loop不生效——解決及猜想

情景介紹

vue+typescript+vue-awesome-swiper項目，首頁輪播使用vue-awesome-swiper，banner數據從服務器端加載。
數據加載需要時間，如果直接載入vue-awesome-swiper，結果是swiperOption配置的loop: true不生效：

swiperOption: {
    loop: true,
}

猜想

猜測原因就是初始化的時候沒有足夠的元素swiper-slide，所以沒有執行復制元素的操作，就沒有loop。
爲了驗證這個猜測，做了一下幾個嘗試：

1. 初始化banner長度爲1，服務器返回的長度爲4，運行。

   結果是loop依然沒有生效。
   ？loop沒響應或者缺少監聽器observer

2. 加入observer: true屬性進行監聽，再運行。
   依然不生效。
   ？observer不生效
3. 瀏覽器控制檯執行元素刪除操作。

   滑塊的頁腳同時變化
   ！observer生效——loop不響應

結論

loop屬性不是響應式的，數據變動之後不會自動初始化整個滑塊

解決

開始的時候，想的辦法是初始化設置init: false，獲取數據之後再執行init()，可以解決該問題。
後來看了一篇文章，可以對數據長度做一個判斷：

<swiper v-if="banner.length > 0" :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">

增加這個判斷之後，loop的問題解決了。
原因是隻有banner.length > 0的時候，纔會掛載swiper，只有掛在之後纔會執行初始化的init操作，所以可以確保loop執行的時候，滑塊元素swiper-slide是存在且完整的，完美解決！

結語

解決bug的友情鏈接～