Vue中动态拼接innerHTML时添加点击事件，并在点击事件中调用vue方法

女爷i 2023-09-30 13:04 10阅读 0赞

## 场景 ##

在VUE页面中动态生成某个弹窗的innerHTML的内容。

内容中添加一个button，并设置Button的点击事件，

在点击事件中能调用vue的方法。

注：

博客：  
[霸道流氓气质的博客\_CSDN博客-C\#,架构之路,SpringBoot领域博主][CSDN_-C_SpringBoot]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

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

[CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi