Vue中動態拼接innerHTML時新增點選事件,並在點選事件中呼叫vue方法
阿新 • • 發佈:2022-04-13
場景
在VUE頁面中動態生成某個彈窗的innerHTML的內容。
內容中新增一個button,並設定Button的點選事件,
在點選事件中能呼叫vue的方法。
注:
部落格:
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程式猿
獲取程式設計相關電子書、教程推送與免費下載。
實現
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){
},
}