vue?innerHTML?綁定單擊事件不生效的解決
更新時間：2023年01月24日 13:26:41 作者：---清心寡欲---
這篇文章主要介紹了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);現(xiàn)象
報錯找不到方法未定義
將@click修改為onclick后，方法找到了，但是參數(shù)傳遞不過去
最終解決方法
document.getElementById綁定onclick事件，注意如果調用方法，一定要將this賦值給that，再調用方法
具體實現(xiàn)代碼如下：
?let that = this;
???document.getElementById("elementid").onclick =
??????????function clickdiv() {
????????????// “clickWarnCnt”為自定義的方法,點擊事件調用的方法
????????????that.clickWarnCnt(warnCntItem);
??????????};
??????}vue動態(tài)拼接innerHTML時添加點擊事件，并在點擊事件中調用vue方法
場景
在vue頁面中動態(tài)生成某個彈窗的innerHTML的內容。
內容中添加一個button，并設置Button的點擊事件，
在點擊事件中能調用vue的方法。
實現(xiàn)
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還傳遞了參數(shù)。
2、那么這個點擊時的方法應該在哪里聲明才能在該方法中調用vue中methods中的方法
在mounted函數(shù)中
? ? mounted() {
? ? ? ? let self = this;
? ? ? ? //模板參數(shù)傳參
? ? ? ? const _this = this
? ? ? ? window.previewNvrVideo = function (channelNum) {
? ? ? ? ? ? _this.nvrPreview(channelNum);
? ? ? ? }
?
? ? },3、然后就可以再Vue頁面中調用methods中的nvrPreview方法了
? ? methods: {
? ? ? ? nvrPreview(channelNum){
? ? ? ? },
? ?}?總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue tagsview實現(xiàn)多頁簽導航功能流程詳解
基本上后臺管理系統(tǒng)都需要有多頁簽的功能，但是因為一些腳手架項目基本都把這個功能給集成好了，導致在學習或者修改的時候不知道該如何下手。今天這篇文章就來聊一聊，vue-element-admin項目是如何實現(xiàn)多頁簽功能的2022-09-09
這篇文章主要介紹了vue+element-ui表格封裝tag標簽使用插槽，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
今天小編就為大家分享一篇vue動態(tài)設置img的src路徑實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要給大家介紹了關于Vue如何啟動項目的相關資料,還介紹了解決vue啟動項目時間很長問題的相關方法,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue+flask實現(xiàn)視頻合成功能(拖拽上傳),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-03
vue或react項目生產環(huán)境去掉console.log的操作
這篇文章主要介紹了vue或react項目生產環(huán)境去掉console.log的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
本篇文章主要介紹了Vuex之理解Mutations的用法實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
Vue自定義指令實現(xiàn)對數(shù)字進行千分位分隔
對數(shù)字進行千分位分隔后展示應該是大部分同學都做過的功能了吧,常規(guī)的做法通常是編寫一個工具函數(shù)來對數(shù)據(jù)進行轉換,那么我們可不可以通過vue指令來實現(xiàn)這一功能呢,下面我們就來探索一下呢2024-02-02
這篇文章主要介紹了vue中如何下載文件導出保存到本地，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue+elementUI實現(xiàn)動態(tài)合并數(shù)據(jù)相同的單元格(可指定合并列)
這篇文章主要介紹了vue+elementUI如何實現(xiàn)動態(tài)合并數(shù)據(jù)相同的單元格,文中有詳細的代碼實例供大家參考,具有一定的參考價值,需要的朋友可以參考下2023-07-07