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 ...
随机推荐
- Appium自动化测试教程-自学网-安卓模拟器
安卓模拟器: 夜神模拟器安装配置 下载地址:https://www.yeshen.com 开启VT VT是什么?为什么要开启VT? VT,全称是Virtualization Technology,即是 ...
- SIGAI机器学习第十四集 支持向量机1
讲授线性分类器,分类间隔,线性可分的支持向量机原问题与对偶问题,线性不可分的支持向量机原问题与对偶问题,核映射与核函数,多分类问题,libsvm的使用,实际应用 大纲: 支持向量机简介线性分类器分类间 ...
- 【概率论】4-1:随机变量的期望(The Expectation of a Random Variable Part I)
title: [概率论]4-1:随机变量的期望(The Expectation of a Random Variable Part I) categories: - Mathematic - Prob ...
- HTML学习日记 入门教程 知识点 ing
初学html,如有错误,欢迎指正谢谢. 这只是一些基础的知识点,是学习后自己想到总结的,不适合资深者. 1.href是Hypertext Reference的缩写.意思是指定超链接目标的URL.是cs ...
- 数据结构实验之栈与队列六:下一较大值(二)(SDUT 3333)
#include <bits/stdc++.h> using namespace std; int a[1000006]; int b[1000006]; int sta[100006]; ...
- Python3使用openpyxl读写Excel文件
Python中常用的操作Excel的三方包有xlrd,xlwt和openpyxl等,xlrd支持读取.xls和.xlsx格式的Excel文件,只支持读取,不支持写入.xlwt只支持写入.xls格式的文 ...
- SNMP 协议介绍 转载
一.SNMP简单概述 1.1.什么是Snmp SNMP是英文"Simple Network Management Protocol"的缩写,中文意思是"简单网络管理协议& ...
- CentOS6.8上Docker配置阿里云镜像加速器
1.打开网站https://dev.aliyun.com,点击管理中心,登录阿里云账号(没有的可以注册,也可以用淘宝等第三方账号登录). 2.点击镜像加速器,复制加速器地址 3.配置本机Docker运 ...
- Golang的文件处理方式-常见的读写
在 Golang 语言中,文件使用指向 os.File 类型的指针来表示的,也叫做文件句柄.注意,标准输入 os.Stdin 和标准输出 os.Stdout ,他们的类型都是 *os.File 哟.在 ...
- centos出现磁盘坏道,怎么检索和修复
故障现象,在/var/log/message这个目录中出现下面的error: [ [ [ [ [ [ [ [ [ [ dmesg的输出结果也是上面的error. 1.检测下坏道,将结果保存在bb.lo ...