vue?innerHTML?綁定單擊事件不生效的解決
更新時間：2023年01月24日 13:26:41 作者：---清心寡欲---
這篇文章主要介紹了vue?innerHTML?綁定單擊事件不生效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue innerHTML 綁定單擊事件不生效
在使用 vue時候?qū)?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事件，注意如果調(diào)用方法，一定要將this賦值給that，再調(diào)用方法
具體實現(xiàn)代碼如下：
?let that = this;
???document.getElementById("elementid").onclick =
??????????function clickdiv() {
????????????// “clickWarnCnt”為自定義的方法,點擊事件調(diào)用的方法
????????????that.clickWarnCnt(warnCntItem);
??????????};
??????}vue動態(tài)拼接innerHTML時添加點擊事件，并在點擊事件中調(diào)用vue方法
場景
在vue頁面中動態(tài)生成某個彈窗的innerHTML的內(nèi)容。
內(nèi)容中添加一個button，并設(shè)置Button的點擊事件，
在點擊事件中能調(diào)用vue的方法。
實現(xiàn)
1、innerHTML的內(nèi)容如下
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并設(shè)置了點擊事件previewNvrVideo還傳遞了參數(shù)。
2、那么這個點擊時的方法應(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頁面中調(diào)用methods中的nvrPreview方法了
? ? methods: {
? ? ? ? nvrPreview(channelNum){
? ? ? ? },
? ?}?總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
下面小編就為大家分享一篇解決vue+webpack打包路徑的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
基于uniapp+vue3自定義增強版table表格組件「兼容H5+小程序+App端」
uv3-table：一款基于uniapp+vue3跨端自定義手機端增強版表格組件,支持固定表頭/列、邊框、斑馬紋、單選/多選,自定義表頭/表體插槽、左右固定列陰影高亮顯示,支持編譯兼容H5+小程序端+App端,H5+小程序+App端,多端運行一致2024-05-05
本篇文章主要介紹了vue實現(xiàn)一個移動端屏蔽滑動的遮罩層實例，具有一定的參考價值，有興趣的可以了解一下2017-06-06
下面小編就為大家?guī)硪黄獀ue引入jq插件的實例講解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了Vue.use()的用法和install的用法解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue?echarts實例項目地區(qū)銷量趨勢堆疊折線圖實現(xiàn)詳解
Echarts，它是一個與框架無關(guān)的 JS 圖表庫，但是它基于Js，這樣很多框架都能使用它，例如Vue，估計IONIC也能用，因為我的習(xí)慣，每次新嘗試做一個功能的時候，總要新創(chuàng)建個小項目，做做Demo2022-09-09
webpack+vue.js構(gòu)建前端工程化的詳細教程
這篇文章主要介紹了webpack+vue.js構(gòu)建前端工程化的方法，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
本文主要介紹了element滾動條組件el-scrollbar的使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要介紹了淺談Vue響應(yīng)式(數(shù)組變異方法)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了Vue基礎(chǔ)語法知識梳理，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-12-12