用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. 长脖子鹿放置【洛谷P5030】二分图最大独立集变形题

    题目背景 众周所知,在西洋棋中,我们有城堡.骑士.皇后.主教和长脖子鹿. 题目描述 如图所示,西洋棋的“长脖子鹿”,类似于中国象棋的马,但按照“目”字攻击,且没有中国象棋“别马腿”的规则.(因为长脖子 ...

  2. 012_STM32程序移植之_内部flash开机次数管理lib库建立

    012_STM32程序移植之_内部flash开机次数管理lib库建立 1. 测试环境:STM32C8T6 2. 测试接口: 3. 串口使用串口一,波特率9600 单片机引脚------------CH ...

  3. Reflect对象

    一.Reflect对象基础 Reflect对象是ES6出现的新的API,用于操作对象内部的方法. 特点: 1. 对于操作有明确的返回结果.如返回布尔值表示操作成功与否 2. 和Proxy的拦截方法一一 ...

  4. Vue 中的 ref $refs

    ref 被用来给DOM元素或子组件注册引用信息.引用信息会根据父组件的 $refs 对象进行注册.如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例 注意:只要想 ...

  5. danfu添加商品实例

    GoodsBaseInfoVO extends GoodsBaseInfo JSONResponse saveOrUpdateBaseGoodinfo void insertGoodBaseInfo ...

  6. [POI2015]LAS

    洛谷题目链接 动态规划: 这里用一种我想不到的思想,我们以美食来转移,设计状态$f[i][S](S\in\{0\sim3\})$其中$S$为$0$时表示第$i$个食物没有被人选,$1$表示被左边的人选 ...

  7. 【luogu1325】雷达安装--贪心

    题目描述 描述: 假设海岸线是一条无限延伸的直线.它的一侧是陆地,另一侧是海洋.每一座小岛是在海面上的一个点.雷达必须安装在陆地上(包括海岸线),并且每个雷达都有相同的扫描范围d.你的任务是建立尽量少 ...

  8. 数据结构实验之数组一:矩阵转置(SDUT 2130)

    Problem Description 数组--矩阵的转置 给定一个m*n的矩阵(m,n<=100),求该矩阵的转置矩阵并输出. Input 输入包含多组测试数据,每组测试数据格式如下: 第一行 ...

  9. selenium 定制启动chrome的参数

    selenium 定制启动chrome的参数 设置代理. 禁止图片加载 修改ua https://blog.csdn.net/vinson0526/article/details/51850929 1 ...

  10. JS 的 new 到底是干什么的?

    大部分讲 new 的文章会从面向对象的思路讲起,但是我始终认为,在解释一个事物的时候,不应该引入另一个更复杂的事物. 今天我从「省代码」的角度来讲 new. --------------------- ...