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