今天小编就为大家分享一篇VUE解决 v-html不能触发点击事件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
背景：后端返前端html格式的数据，前端用v-html解析渲染，如：<a @click="show(1)"></a>，a标签能成功渲染，但其绑定的事件无法触发。
原因：vue没有将其作为vue的模板解析渲染
解决方案：不用v-html而是component模板编译
上干货：
<template> <div> <h1> 我是父组件 </h1> <div> </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不能触发点击事件的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: