Vue中使用v-viewer，打开图片指定显示某一张图片

在vue中使用v-viewer，点击图片后默认会显示第一张图片，通过this.$nextTick(()=>{this.$viewer.update().view(vindex)}) 指定显示某张图片

html中 

<viewer :options="preview_options" :images="images" @inited="initedViewer" class="image_previewer" ref="viewer">
    <template slot-scope="scope">
        <img v-for="src in scope.images" :src="src" :key="src">
        {{scope.preview_options}}
    </template>
</viewer> 

 js中

initedViewer (viewer) {
    this.$viewer = viewer
},

//显示图片
previewImage(message) {
    let images = []
    let vindex = -1
    this.current_session.messages.forEach(msg=>{
        if( msg.type == 'image' && !images.includes(msg.content.url)) {
            images.push(msg.content.url)
            if( message == msg ) {
               vindex = images.length -1
            }
        }
    })
            
    this.images = images;

    //只调用$viewer的show方法，默认显示第一张图片
    //如果需要指定显示某一张图片使用view方法，index是指定的那张图片所在数组的位置索引
    //但是只用view方法,第一次点击图片时会显示图片数组中的第一个图片，再次点击就会正常
    //使用update()更新视图然后再指定图片，这样就能出现指定的图片啦

    if( vindex > -1 ) {
        this.$nextTick(()=>{
            this.$viewer.update().view(vindex)
        })
    }
    this.$viewer.show()
},

参考文档：

vue中实现图片预览放大，缩小，旋转等功能，Viewer.js第一次点击图片无法显示(vue使用)_viewer不显示缩略图vue_雯雯1688的博客-CSDN博客 

v-viewer图片预览插件的使用 - 简书