Viewer.js第一次點擊圖片無法顯示解決方案(vue使用)

Viewer.js是一個大圖預覽插件。附上官網地址（https://fengyuanchen.github.io/viewerjs/）

說明一下我的使用情況。點擊圖片查看，出大圖預覽

不需要有預覽小圖。查看官網文檔，下載js文件。引入文件。

<link href="/Scripts/Common/viewer.min.css" rel="stylesheet">
<script src="/Scripts/Common/viewer.min.js"></script>

不需要預覽小圖的話，src標籤不寫地址就可以沒有預覽小圖了。

記錄一下2個問題。

A：點擊多次的時候數據錯亂的問題。這是因爲一個頁面只能有一個viewer，所以每次事件結束需要進行銷燬viewer，然後重新新建就可以。

B：異步數據填充的時候，數據拿到的順序影響了渲染，所以導致第一次點擊照片無法顯示，但是console.log能打印出自己需要展示的數組（因爲console.log不是立即執行的），這是因爲順序問題，如果出現這個問題的話，是第一次new viewer的順序在拿到數據之前。解決辦法在vue裏面就是使用this.$nextTick(()=>{}) 

附上代碼：

HTML：

 <el-table-column label="照片" align='center' fixed="right">
      <template slot-scope="scope">
           <el-button type="text" size="small" v-on:click="lookDetail(scope.row)">查看</el-button>
      </template>
  </el-table-column>
 
 <div class='elImage' v-show="centerDialogVisible">
        <ul id='viewer'>
            <li v-for="(item,index) in photo1" :key="index">
                <img class="user-avatar" :data-original='item'  src="">
            </li>
        </ul>
    </div>

js:

data(){
    return{
        photo1: [], // 圖片地址
    }
},
mounted: function () {
    this.GetAssetList(this.searchForm)   //根據查詢條件進來拿到列表
},
methods:{
     GetAssetList(){ //獲取table裏面的數據，包括照片地址
         
     },
      lookDetail: function (row) {
                var that = this
                that.photo1 = row.photo
                // 必須使用this.$nextTick！否則第一次點擊沒有圖片展示！
                that.$nextTick(function(){
                  var viewer = new Viewer(document.getElementById('viewer'),{
                    url: 'data-original',
                    navbar: false,
                    fullscreen: false,
                    hide:function(){ //在圖片消失的時候銷燬viewer
                        viewer.destroy()
                    }
                 });
                 viewer.show()
                })
            },
}

以上！