VUE中v-html不能触发点击事件怎么办
这篇文章主要介绍VUE中v-html不能触发点击事件怎么办,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
背景:后端返前端html格式的数据,前端用v-html解析渲染,如:<a @click="show(1)"></a>,a标签能成功渲染,但其绑定的事件无法触发。
原因:vue没有将其作为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>
页面:
控制台:
以上是“VUE中v-html不能触发点击事件怎么办”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!