vue innerHTML 绑定单击事件不生效的解决
作者：---清心寡欲---
这篇文章主要介绍了vue innerHTML 绑定单击事件不生效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
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时添加点击事件，并在点击事件中调用vue方法
场景
在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){
},
} 总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。