用ZUI的图片浏览：lightbox

写静态html的时候是有预览效果的，使用了vue动态加载就没有效果了，

网上的说法是动态生成的没有激活事件：ZUI(BootStrap)动态插入HTMl所创建的data-toggle事件初始化方法

处理方法是：

$(“.cards”).find(‘.card’).eq(0).find(‘a’).eq(0).lightbox();

popover同理：$(“.cards”).find(‘.card’).eq(0).find(‘a’).eq(0).popover();

 

这边优化了下：加载完列表时触发lightbox

watch 下item的加载完成

    var app = new Vue({
        el: '#app',
        data: {
            items: [
                {"id":1}
            ],
            page: {
                "index": 1,
                "total": 0,
                "pagesize": 2
            }
        },
        methods: {
            indexs:function(){

                axios
                    .get('mock/ajax-form-list.json')
                    .then(response => {
                        // console.log(response);
                        this.items = response.data.result.list
                        this.page = response.data.result.page
                })
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            }
        },
        watch:{
            items: function() {
                this.$nextTick(function(){
                    /*现在数据已经渲染完毕*/
                    $('img.cardimg').lightbox({
                        caption: '图片说明'
                    });
                    console.log("load completed")
                })
            }
        },
        created(){
            //自动加载indexs方法
            this.indexs();
            console.log("created completed")
        },
        mounted(){
            console.log("mounted completed")
        }

    });