vue.js無法觸發事件是因為vue沒有將其作為vue的模板解析渲染,其解決方法就是不用v-html,而是透過component模板編譯渲染前端資料即可。
本教學操作環境:windows7系統、vue3版,DELL G3電腦。
vue.js v-html無法觸發點擊事件?
背景:
後端返前端html格式的數據,前端用v-html解析渲染,如: ,a標籤能成功渲染,但其綁定的事件無法觸發。
原因:
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>
頁面:
##控制台: 【相關文章推薦:vue.js】
以上是vue.js無法觸發事件怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章!