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 ...
随机推荐
- zabbix通过钉钉报警
1.创建报警脚本 vim /usr/local/share/zabbix/alertscripts/dingalert.py #!/usr/bin/env python import json im ...
- [USACO19OPEN]Snakes
题目链接 题目简介:有n组,每组有若干个蛇的蛇队伍.(也可以理解为n条长度若干的蛇.)我们要用网捕捉,中途可以改变网的大小.目标是浪费空间最小. 解法:首先明确方法:DP.设f[i][t]为捕捉了n条 ...
- select([[data],fn])
select([[data],fn]) 概述 当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件.大理石平台生产厂 这个函数会调用执行绑定到select事 ...
- 001_Python安装
1. 判断电脑是否已经安装python,电脑->运行->输入:python 2. 如果没有安装,去官网下载:https://www.python.org/downloads/ 3. 安装过 ...
- 041_查找 Linux 系统中的僵尸进程
#!/bin/bash#awk 判断 ps 命令输出的第 8 列为 Z 是僵尸进程,显示该进程的 PID 和进程命令 ps aux |awk '{if($8 == "Z"){pri ...
- Poj 2976 Dropping tests(01分数规划 牛顿迭代)
Dropping tests Time Limit: 1000MS Memory Limit: 65536K Description In a certain course, you take n t ...
- BZOJ 4732 UOJ #268 [清华集训2016]数据交互 (树链剖分、线段树)
题目链接 (BZOJ) https://www.lydsy.com/JudgeOnline/problem.php?id=4732 (UOJ) http://uoj.ac/problem/268 题解 ...
- TCP SACK 介绍 转载
一.SACK选项 默认情况下TCP采取的是累积确认机制,这时如果发生了报文乱序到达,接收方只会重复确认最后一个按序到达的报文段,为此发送方的处理只能是重复按序到达接收方的报文段之后的那个报文段,因而它 ...
- ICEM—气体罐子
原视频下载地址:https://yunpan.cn/cPfzaLzkcFXVK 访问密码 62cf
- Leetcode题目337:打家劫舍 III(树形DP-中等)
题目描述: 在上次打劫完一条街道之后和一圈房屋后,小偷又发现了一个新的可行窃的地区.这个地区只有一个入口,我们称之为“根”. 除了“根”之外,每栋房子有且只有一个“父“房子与之相连.一番侦察之后,聪明 ...