用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")
} });

ZUI(BootStrap)使用vue动态插入HTMl所创建的data-toggle事件初始化方法的更多相关文章

  1. 【Html】Vue动态插入组件

    html: <div id="app"> <p>{{ message }}</p> <button @click="add('a ...

  2. vue 动态插入组件

    HTML代码: <div id="app"> <p>{{ message }}</p> <button @click="add( ...

  3. XML 动态 插入 父类标示 子类标示

    由于第一次写博客,写的不好的地方,还请各位大神多多指点, 讲解一下:xml动态插入数据并保存,写这个时候费了我不少劲,最后终于皇天不负有心人让我搞出来了,特意分享给大家,写的不完美的地方还请大家多多指 ...

  4. JavaScript 动态插入 CSS

    写组件时有时想把一些组件特性相关的 CSS 样式封装在 JS 里,这样更内聚,改起来方便.JS 动态插入 CSS 两个步骤就可以 创建一个 style 对象 使用 stylesheet 的 inser ...

  5. FMDB处理动态插入语句

    昨天做一个需求,参数的数量不确定,所以无法使用这个API: - (BOOL)executeUpdate:(NSString*)sql, ... 但是用 - (BOOL)executeUpdate:(N ...

  6. Sql [hierarchyid]类型如何动态插入层级数据

    [hierarchyid] 是个不错的数据类型,能够方便的操作树型结构,网上找了很多资料没找到如何做到动态插入节点的例子,只好从MSDN认真看了下资料写出了一个DEMO CREATE TABLE Em ...

  7. jquery动态插入行

    这是一个利用jquery动态插入输入内容的代码. html代码: <div title="分表2" class="ui-edit" style=" ...

  8. jquery动态插入行,不用拼写html,简洁版

    这个一个利用jquery实现动态插入输入行效果小功能,不用在javascript里拼写html字符串,更简洁.高效. html代码: <div class="fitem"&g ...

  9. 动态插入图片到 svg 中

    动态插入图片到 svg 中使用 createElementNS 来创建svg标签,通过setAttributeNS 来设置属性, 要注意两点,创建的时候要有'http://www.w3.org/200 ...

随机推荐

  1. 下拉框 显示name 隐藏code

    暂未做详细整理, 后期有机会完善 jsp 是否有效: <s:select id="queryIsValid" name="configBean.queryIsVal ...

  2. change([[data],fn]) 当元素的值发生改变时,会发生 change 事件。

    change([[data],fn]) 概述 当元素的值发生改变时,会发生 change 事件.大理石平台价格表 该事件仅适用于文本域(text field),以及 textarea 和 select ...

  3. Comet OJ - Contest #13 「佛御石之钵 -不碎的意志-」(困难版) 并查集

    题意 给一个$ n \times m$ 的网格,每个格子里有一个数字,非 \(0\) 即 \(1\),行从上往下依次编号为 \(1, 2, \cdots, n\),列从左往右依次编号为 \(1, 2, ...

  4. Luogu [P3622] [APIO2007]动物园

    题目链接 比较费脑子的一道题 先说题目核心思想 : 状压dp 环的处理我们先不管. 我们设 dp[j][s] 表示 到达动物 j 且 [ j , j+5) 这五个动物状态为s时 最多能使多少小朋友开心 ...

  5. python 获取主机名称和ip地址

    python2.7 #!/usr/bin/env python # Python Network Programming Cookbook -- Chapter - # This program is ...

  6. ImportError: No module named pytz

    xxx@hostname:/opt/xx/cc$ python manage.py runserver Traceback (most recent call last): File , in < ...

  7. kubernetes案例 tomcat+mysql

    该文章参考<kubernetes 权威指南> 环境: [root@master tomcat-mysql]# kubectl get nodesNAME      STATUS    AG ...

  8. REGIONAL SCRUM GATHERING(RSG)2019 CHINA.

    欢迎参加 REGIONAL SCRUM GATHERING(RSG)2019 CHINA. 今年RSG将于2019年8月23号~24号,在北京新世界酒店举办.在为期2天的敏捷大会中,将有接近40位国内 ...

  9. QThreadPool类和QtConcurrent命名空间

    一.QThreadPool类  QThreadPool管理一组线程.它负责管理和回收单个QThread对象以减少程序中线程创建的开销.每个Qt应用程序都有一个全局的QThreadPool对象,可通过方 ...

  10. 调用subprocess 使用logging打印日志

    #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:Henry 17607168727@163.com import sys import lo ...