VUE解決 v-html不能觸發(fā)點(diǎn)擊事件的問題
更新時(shí)間：2019年10月28日 10:03:09 作者：__光
今天小編就為大家分享一篇VUE解決 v-html不能觸發(fā)點(diǎn)擊事件的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
背景：后端返前端html格式的數(shù)據(jù)，前端用v-html解析渲染，如：<a @click="show(1)"></a>，a標(biāo)簽?zāi)艹晒︿秩?，但其綁定的事件無法觸發(fā)。
原因：vue沒有將其作為vue的模板解析渲染
解決方案：不用v-html而是component模板編譯
上干貨：
<template>
<div class="hello">
<h1>
我是父組件
</h1>
<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>
頁面：
控制臺(tái)：
以上這篇VUE解決 v-html不能觸發(fā)點(diǎn)擊事件的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js與 ASP.NET Core 服務(wù)端渲染功能整合
本文通過案例給大家詳細(xì)分析了ASP.NET Core 與 Vue.js 服務(wù)端渲染,需要的朋友可以參考下2017-11-11
Vue中定義src在img標(biāo)簽使用時(shí)加載不出來的解決
這篇文章主要介紹了Vue中定義src在img標(biāo)簽使用時(shí)加載不出來的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue列表單項(xiàng)展開收縮功能之this.$refs的詳解
這篇文章主要介紹了vue列表單項(xiàng)展開收縮功能之this.$refs的詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要為大家介紹了Vitepress的文檔渲染基礎(chǔ)教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
Vue+WebSocket頁面實(shí)時(shí)刷新長連接的實(shí)現(xiàn)
最近vue項(xiàng)目要做數(shù)據(jù)實(shí)時(shí)刷新，數(shù)據(jù)較大，會(huì)出現(xiàn)卡死情況，所以本文主要介紹了頁面實(shí)時(shí)刷新長連接，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了vue+element控件之間間距太大問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue 2.0在IE11中打開項(xiàng)目頁面空白的問題解決
這篇文章主要給大家介紹了關(guān)于Vue 2.0在ie 11中打開項(xiàng)目頁面空白問題的解決方法，文中詳細(xì)分析出現(xiàn)該問題的原因，并給出了詳細(xì)的解決方法，需要的朋友可以參考借鑒，下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
15 分鐘掌握vue-next函數(shù)式api(小結(jié))
這篇文章主要介紹了15 分鐘掌握vue-next函數(shù)式api(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
form-create 是一個(gè)可以通過 JSON 生成具有動(dòng)態(tài)渲染、數(shù)據(jù)收集、驗(yàn)證和提交功能的表單生成器。本文給大家簡單介紹了VueJS U取得RL 參數(shù)值的方法，詳細(xì)給大家介紹了vue自定義表單生成器可根據(jù)json參數(shù)動(dòng)態(tài)生成表單效果，感興趣的朋友一起看看吧2019-07-07
typescript中this報(bào)錯(cuò)的解決
這篇文章主要介紹了typescript中this報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01