跟vue结合，动态生成lightbox点击图片不展示大图

[blessyezi]

代码如下

...
<div v-for="chat in chats">
    <span v-if="chat.media == 1">
        <img data-toggle="lightbox" v-bind:src="chat.s_imageUrl" class="img-thumbnail" alt="" v-bind:data-image="chat.imageUrl" data-caption="" />
    </span>
</div>
...
<script type="text/javascript">
    var vm = new Vue({
        el: '#chat',
        data: {
            chats: []
        }
    });
    var wsc = new WebSocket('ws://' + location.hostname + ':3000/cust-client/cust/connect?account='+account);
    wsc.onmessage = function(evt){
        vm.chats.push(evt.data)
    }
</script>

现在的情况是这样，如果我在data中初始化chats，比如data:{chats:[msgObject1]}，图片能正常显示，点击图片也能展示大图，但是如果是在websocket中接收到message对象，再往data中塞的时候，图片也能正常显示，点击没有反应，console中也看不到异常信息，折腾了半天没搞定，这是我代码写的不对吗？

[catouse]

Lightbox 只会自动初始化页面加载时出现在页面上的 [data-toggle="lightbox"] 元素作为触发元素。如果要为动态插入的内容启用 Lightbox 有两种方式：

1. 在动态内容插入到页面后，选中动态插入的内容并调用 lightbox() 方法。

$('#newContents [data-toggle="lightbox"]').lightbox();

2. 检测所有 [data-toggle="lightbox"] 元素上的点击事件，如果没有初始化则进行初始化并再次触发点击事件。

$(document).on('click', '[data-toggle="lightbox"]', function() {
    var $this = $(this);
    if(!$this.data('zui.lightbox')) {
        $this.lightbox().trigger('click');
    }
});

[blessyezi]

非常感谢！搞定啦:+1:
由于vue是双向绑定，用第一种方法可能还需要加一个延时，所以使用了第二种方法.