vue实现在v-html的html字符串中绑定事件
更新时间：2019年10月28日 10:42:07 作者：sayok_why
今天小编就为大家分享一篇vue实现在v-html的html字符串中绑定事件，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
需求：
需要在v-html的html字符串的button中绑定点击事件，需要点击后做一些操作，必须渲染成html，但是渲染后的html里面写绑定事件的代码没有经过vue编译，所以事件无效。
<div class="code-review">
<div v-html="html" v-highlight @click="addComment($event)"></div>
</div>
computed: {
html () {
return '<button></button >'
},
},
解决办法：
在v-html同级元素中使用事件绑定，然后根据事件触发的目标对象去判断和获取参数。
addComment:function (event) {
if(event.target.nodeName === 'BUTTON'){
// 获取触发事件对象的属性
alert("a");
}
},
以上这篇vue实现在v-html的html字符串中绑定事件就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文详细讲解了Vue导入excel表,导入失败的数据自动下载的方法，文中通过示例代码介绍的非常详细。对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-11-11
这篇文章主要为大家详细介绍了vue集成百度UEditor富文本编辑器的使用教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-09-09
本篇文章主要介绍了vue使用vue-i18n实现国际化的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
对整个系统来说，一般会有很多业务对象，而每个业务对象的API接口又有很多。我们这个VUE+Element 前端应用就是针对ABP框架的业务对象，因此前端的业务对象接口也是比较统一的，那么可以考虑在前端中对后端API接口调用进行封装，引入ES6的方式进行前端API的抽象简化。2021-05-05
这篇文章主要为大家详细介绍了vue自定义开发滑动图片验证组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了vue学习笔记之Vue中css动画原理,结合简单实例形式分析了Vue中css样式变换动画效果实现原理与相关操作技巧,需要的朋友可以参考下2020-02-02
今天小编就为大家分享一篇vue之debounce属性被移除及处理详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。这篇文章主要介绍了vue.js绑定style和class的相关资料,需要的朋友可以参考下2016-10-10
这篇文章主要为大家介绍了Vue3源码分析组件挂载创建虚拟节点，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
今天小编就为大家分享一篇在vue中把含有html标签转为html渲染页面的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
最新评论