解决v-html代码中添加@click点击事件不生效问题

<div>
<div class="modeCollapse-desc" v-html="item.desc"></div>
</div>

desc: `你好,请前往 <span id="dataset">我的页面</span>  中更改数据`

1、将@click事件换成原生的onClick事件(我用没生效)

desc: `你好,请前往 <span onClick="goMy">我的页面</span>  中更改数据`
methods(){
goMy(){}
}
mounted(){
window.goMy = this.goMy
}

2、将点击事件写到父元素上(这个方法我用生效了)

<div @click="goMy($event)">
<div class="modeCollapse-desc" v-html="item.desc"></div>
</div>

desc: `你好,请前往 <span id="dataset">我的页面</span>  中更改数据`
methods(){
goMy(e){
if(e.target.id == 'dataset){
//在此进行相关操作即可
}

}
}
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在 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 代码绑定点击事件,同时点击事件也能够正常生效了。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值