vue innerHTML 绑定单击事件不生效的解决

目录vueinnerHTML绑定单击事件不生效原代码最终解决方法vue动态拼接innerHTML时添加点击事件,并在点击事件中调用vue方法场景实现总结vueinnerHTML绑定单击事件不生...

目录
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);

现象

报错找不到方法未定义

vue innerHTML 绑定单击事件不生效的解决

[email protected],方法找到了,但是参数传递不过去

最终解决方法

document.getElementById绑定onclick事件,注意如果调用方法,一定要将this赋值给that,再调用方法

具体实现代码如下:

let that = this;
document.getElementById("elementid").onclick =
function clickdiv() {
// “clickWarnCnt”为自定www.cppcns.com义的方法,点击事件调用的方法

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){
    },
 }

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

延伸阅读:

上一篇:vue安装node-sass和sass-loader报错问题的解决办法

下一篇:vue中ref引用操作DOM元素的实现