ZUI(BootStrap)使用vue动态插入HTMl所创建的data-toggle事件初始化方法
用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事件初始化方法的更多相关文章
- 【Html】Vue动态插入组件
html: <div id="app"> <p>{{ message }}</p> <button @click="add('a ...
- vue 动态插入组件
HTML代码: <div id="app"> <p>{{ message }}</p> <button @click="add( ...
- XML 动态 插入 父类标示 子类标示
由于第一次写博客,写的不好的地方,还请各位大神多多指点, 讲解一下:xml动态插入数据并保存,写这个时候费了我不少劲,最后终于皇天不负有心人让我搞出来了,特意分享给大家,写的不完美的地方还请大家多多指 ...
- JavaScript 动态插入 CSS
写组件时有时想把一些组件特性相关的 CSS 样式封装在 JS 里,这样更内聚,改起来方便.JS 动态插入 CSS 两个步骤就可以 创建一个 style 对象 使用 stylesheet 的 inser ...
- FMDB处理动态插入语句
昨天做一个需求,参数的数量不确定,所以无法使用这个API: - (BOOL)executeUpdate:(NSString*)sql, ... 但是用 - (BOOL)executeUpdate:(N ...
- Sql [hierarchyid]类型如何动态插入层级数据
[hierarchyid] 是个不错的数据类型,能够方便的操作树型结构,网上找了很多资料没找到如何做到动态插入节点的例子,只好从MSDN认真看了下资料写出了一个DEMO CREATE TABLE Em ...
- jquery动态插入行
这是一个利用jquery动态插入输入内容的代码. html代码: <div title="分表2" class="ui-edit" style=" ...
- jquery动态插入行,不用拼写html,简洁版
这个一个利用jquery实现动态插入输入行效果小功能,不用在javascript里拼写html字符串,更简洁.高效. html代码: <div class="fitem"&g ...
- 动态插入图片到 svg 中
动态插入图片到 svg 中使用 createElementNS 来创建svg标签,通过setAttributeNS 来设置属性, 要注意两点,创建的时候要有'http://www.w3.org/200 ...
随机推荐
- [UVa12345] Dynamic len (带 修 )
题意:有n个数编号从0→n-1,两种操作: Q L R:询问编号为L→R-1的数中共有多少种不同的数 M X Y:将编号为X的数改为Y ...
- [51Nod] 配对
https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1737 求出树的重心,跑spfa #include <iostre ...
- AI 期刊会议
本文目的为寻找以下方向最新的发展方向和资料,比如期刊会议. AI包括以下方向:计算机视觉(CV).语言(NLP)和语音 A:计算机视觉(CV) B:语言(NLP) 1. 会议 ACL.EMNLP.NA ...
- windows平台下MySQl的安装、破解和使用
#1.下载:MySQL Community Server 5.7.16 http://dev.mysql.com/downloads/mysql/ #2.解压 如果想要让MySQL安装在指定目录,那么 ...
- 解决MySQL5.7在MAC下登录ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)问题
问题描述 今天在MAC上安装完MYSQL后,MYSQL默认给分配了一个默认密码,但当自己在终端上使用默认密码登录的时候,总会提示一个授权失败的错误:ERROR 1045 (28000): Access ...
- HDU 4380 Farmer Greedy(叉积和三角形知识的综合应用)
题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=115760#problem/A 题目意思大致为由n个点(n小于100)和m个金矿 ...
- 黑马vue---40、结合Node手写JSONP服务器剖析JSONP原理
黑马vue---40.结合Node手写JSONP服务器剖析JSONP原理 一.总结 一句话总结: 服务端可以返回js代码给script标签,那么标签会执行它,并且可带json字符串作为参数,这样就成功 ...
- [MyBatis]org.apache.ibatis.binding.BindingException的避免
我遇到的org.apache.ibatis.binding.BindingException问题是因为Mapper.java中接口和SQL的参数多于一个,Mybatis不知道如何一一对应,解决方法是加 ...
- Windows 7开发:UAC数据重定向 - Win32 Native
Windows 7开发:UAC数据重定向 - Win32 Native 目标 本动手实验中,您将会学习如何: • 故障排除一个文件重定向 问题 • 使用Process Monitor查找引起问题的根本 ...
- ES6深入浅出-1 新版变量声明:let 和 const-2.视频 let和const
以前的var方式声明不好用 a=1回声明一个全局变量, 输出了1 说明a=1确实声明了一个全局变量. 但是你把放在其他的地方,就不是声明全局变量了. 如果外面有个全局变量a 那么函数里面就是给a赋值 ...