您好,登錄后才能下訂單哦!
這篇文章主要介紹VUE中v-html不能觸發(fā)點(diǎn)擊事件怎么辦,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
背景:后端返前端html格式的數(shù)據(jù),前端用v-html解析渲染,如:<a @click="show(1)"></a>,a標(biāo)簽?zāi)艹晒︿秩?,但其綁定的事件無(wú)法觸發(fā)。
原因:vue沒(méi)有將其作為vue的模板解析渲染
解決方案:不用v-html而是component模板編譯
上干貨:
<template> <div class="hello"> <h2> 我是父組件 </h2> <div class="parent" id="parent"> </div> </div> </template> <script> import Vue from 'vue'; var MyComponent = Vue.extend({ template: '<a @click="show(1)">我是大魔王</a>', methods: { show(i) { console.log(i); }, } }); var component = new MyComponent().$mount(); export default { data() { return { } }, methods: { }, mounted() { document.getElementById('parent').appendChild(component.$el); } } </script> <style scoped> </style>
頁(yè)面:
控制臺(tái):
以上是“VUE中v-html不能觸發(fā)點(diǎn)擊事件怎么辦”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。