自动生成的html触发vue,VUE解决 v-html不能触发点击事件的问题

背景:后端返前端html格式的数据,前端用v-html解析渲染,如:,a标签能成功渲染,但其绑定的事件无法触发。

原因:vue没有将其作为vue的模板解析渲染

解决方案:不用v-html而是component模板编译

上干货:

我是父组件

import Vue from 'vue';

var MyComponent = Vue.extend({

template: '我是大魔王',

methods: {

show(i) {

console.log(i);

},

}

});

var component = new MyComponent().$mount();

export default {

data() {

return {

}

},

methods: {

},

mounted() {

document.getElementById('parent').appendChild(component.$el);

}

}

页面:

9070137a47e7b0b3962f6ff14269976c.png

控制台:

7d4944bdb58e0d65f86cd56bf7a6912d.png

以上这篇VUE解决 v-html不能触发点击事件的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2 中,使用 v-html 指令动态渲染 HTML 代码时,如果 HTML 代码中包含有点击事件绑定,会出现点击事件不生效的问题。这是因为 v-html 渲染的 HTML 代码会被当做静态内容插入到 DOM 树中,而不会像 Vue 模板中的标签一样被 Vue 进行编译和渲染。 为了解决这个问题,可以使用 Vue2 的事件委托机制,将点击事件委托给父级元素或者根元素。 具体实现方法如下: 1. 在 div 标签上添加 @click.prevent="handleClick" 事件,用于捕获点击事件。 2. 在 handleClick 方法中,判断点击事件的 target 是否为包含有点击事件绑定的元素,如果是,则执行点击事件对应的方法。 3. 在包含有点击事件绑定的元素上添加一个自定义属性,用于标识该元素需要绑定点击事件。 4. 在 div 标签上使用 v-html 指令渲染 HTML 代码时,将包含有点击事件绑定的元素的自定义属性一同渲染出来。 示例代码如下: HTML 代码: ```html <div @click.prevent="handleClick" v-html="html"></div> ``` Vue 实例: ```javascript new Vue({ el: "#app", data: { html: `<p><a custom-click href="javascript:void(0)">点击我</a></p>` }, methods: { handleClick(e) { const target = e.target; if (target.hasAttribute('custom-click')) { // 执行点击事件对应的方法 console.log('点击事件生效了'); } } }, mounted() { // 在 v-html 渲染的 HTML 代码中添加自定义属性 const a = document.querySelector('a[custom-click]'); if (a) { a.setAttribute('custom-click', 'true'); } } }); ``` 通过以上方法,就可以实现在 div 中使用 v-html 渲染的 HTML 代码中绑定点击事件,同时点击事件也能够正常生效了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值