Viewer.js結合vue異步更新數據顯示失效（錯亂）

前言：

viewer.js是一款小巧而強大的圖片（相冊）查看插件，支持對圖片的很多操作，如放大、縮小、旋轉等等，這裏簡要說一下如何使用，以及配合vue.js異步更新數據時產生的問題及其解決辦法。

一、viewer.js的簡單使用：

（1）首先需要在頁面中引入viewer的js和css

（2）對圖片集的父標籤添加id元素，如下代碼

<div class="col-md-12" id="viewerbox">
    <img v-for="photo in item.questionPhotoList" :src="photo" :data-original="photo" v-if="item.questionPhotoList!=null" class="img-thumbnail">
</div>

注意，上面代碼中需要關心的是img標籤的父標籤div的id屬性，及其img標籤的data-original屬性，其他屬性可不比關心，img的src屬性不用多說，就是圖片標籤的地址，這裏可以是圖片的縮略圖地址，data-original屬性可以是縮略圖對應的大圖地址，當然，如果沒有縮略圖，兩個地址可以是一樣的，並不影響，上面的代碼中看上去只有一個img標籤，其實是通過vue的for循環輸出了很多的img標籤。

（3）在異步獲取到數據之後，我們對viewerbox進行初始化操作，以便能點擊圖片使用viewer查看大圖

function initViewer() {
    $("#viewerbox").viewer({
        url: "data-original"
    });
}

想必在這裏大家明白了，viewer.js是通過對img標籤的父標籤進行操作，以便能獲取到該標籤下所有的圖片集，代碼中的url就是上面說到的圖片的大圖地址（或者任意圖片地址），這樣，我們在獲取到數據之後，調用一下這個方法，就能使用viewer.js查看我們的圖片了。

二、問題與解決

在開發中我遇到這樣一個問題：使用vue.js（ajax獲取同理）異步獲取數據後，第二次及其之後獲取到的數據不能正常的使用viewer.js這個插件，要麼是點擊後沒反應，要麼就是圖片集錯亂，本來只有一張圖片的，但通過viewer查看後有多張不知道哪出來的圖，只有頁面首次加載時的圖片能正常查看。

通過研究，找到了解決辦法，很簡單，代碼如下：

function destroyViewer() {
    $("#viewerbox").viewer("destroy");
}

在我們通過異步操作請求到新的數據之後，在更新數據前調用一下這個銷燬viewer的方法，把之前的viewer銷燬掉，完美的解決上述問題，下面附上異步請求部分的代碼

$.post("/home/question/getQuestionList", requestData, function (res) {
    //更新數據前把原來的viewer銷燬，防止失效或者錯亂
    destroyViewer();
    //更新數據
    app.$data.questionList = res.data.list;
    //重新初始化新數據的viewer，延遲初始化是爲了防止數據還沒加載導致的初始化不成功
    setTimeout(initViewer, 500);
});

最後，項目中用到的viewer.js插件效果在線預覽傳送門：http://www.dowebok.com/192.html，也可以在我上傳的csdn上下載，傳送門：https://download.csdn.net/download/feihongxiansen/11023011