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字符串中绑定事件就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
例如组件使用频率非常高,几乎每个页面都在使用便可以封装成全局组件,下面通过本文给大家介绍Vue3注册全局组件的相关知识,感兴趣的朋友一起看看吧2024-01-01
详解vue+axios给开发环境和生产环境配置不同的接口地址
这篇文章主要介绍了详解vue+axios给开发环境和生产环境配置不同的接口地址，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
vue2.6.10+vite2开启template模板动态编译的过程
这篇文章主要介绍了vue2.6.10+vite2开启template模板动态编译,本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-02-02
下面小编就为大家分享一篇解决在vue项目中,发版之后,背景图片报错,路径不对的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
websocket实现的全双工通信,真真太香了,下面这篇文章主要给大家介绍了关于前端之vue3使用WebSocket的详细步骤,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了使用ElementUI循环生成的Form表单添加校验，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了vue 不使用select实现下拉框功能,在文章给大家提到了vue select 组件的使用与禁用，需要的朋友可以参考下2018-05-05
本篇文章主要介绍了vue 的keep-alive缓存功能的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue data有值,但是页面{{}} 取不到值的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
Delete `,` 如何解决(vue eslint与prettier冲突)
这篇文章主要介绍了Delete `,` 如何解决(vue eslint与prettier冲突)问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论