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