目录Vue innerhtml 绑定单击事件不生效原代码最终解决方法vue动态拼接innerHTML时添加点击事件，并在点击事件中调用vue方法场景实现总结vue innerHTML
在使用 vue时候对 innerHTML进行绑定单击事件，绑定后事件不生效
div.innerHTML =
"<el-button size='mini' type='text' @click='handleUpdate1("+JSON.stringify(warnCntItem)+")' style='color: #f56c6c'> "+warnCntItem.warnCnt+"</el-button>" ;
document.getElementById("block").appendChild(div);现象
报错找不到方法未定义
将@click修改为onclick后，方法找到了，但是参数传递不过去
document.getElementById绑定onclick事件，注意如果调用方法，一定要将this赋值给that，再调用方法
具体实现代码如下：
let that = this;
document.getElementById("elementid").onclick =
function clickdiv() {
// “clickWarnCnt”为自定义的方法,点击事件调用的方法
that.clickWarnCnt(warnCntItem);
};
}在vue页面中动态生成某个弹窗的innerHTML的内容。
内容中添加一个button，并设置Button的点击事件，
在点击事件中能调用vue的方法。
1、innerHTML的内容如下
str =`
<div class="car_detail">
<div class="car_detail_header">
<p>驾驶员：${content.drivername? content.drivername: ""}</p>
<p>车牌号：${content.carNumber ? content.carNumber : ""}</p>
<p>
<button onclick="previewNvrVideo(1)">1号摄像头</button>
</p>添加的button并设置了点击事件previewNvrVideo还传递了参数。
2、那么这个点击时的方法应该在哪里声明才能在该方法中调用vue中methods中的方法
在mounted函数中
mounted() {
let self = this;
//模板参数传参
const _this = this
window.previewNvrVideo = function (channelNum) {
_this.nvrPreview(channelNum);
}
},3、然后就可以再Vue页面中调用methods中的nvrPreview方法了
methods: {
nvrPreview(channelNum){
},
} 以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
--结束END--
本文标题: vue innerHTML 绑定单击事件不生效的解决
本文链接: https://www.lsjlt.com/news/178344.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0