v-html 中如何绑定事件

遇到了一个demo，接口中返回一段代码，大致内容类似如下：

<div style="margin-top: 35px;font-family: PingFang SC;font-style: normal;font-weight: normal;font-size: 16px;line-height: 28px;color: #333333;"><div style="margin-bottom:16px">亲爱的“店主名称”广告主，你好！</div><div>当前还未完成资质提交，请前往认证中心完成资质提交，<span style="color: #194CE5;" data-tagname="QualificationSubmit">点击前往<span>。</div></div>

前端需要将这段代码渲染到页面上，显而易见 需要使用 v-html

其中“点击前往”是需要跳转的，如果在后端返回的字段中直接加上 @click 事件， 会被解析

并不会生效--------------------------

解决方法：

1. 给点击的标签加一个 data-tagname="QualificationSubmit" 

2. v-html 标签整体加一个 @click 事件

<div @click="bindClick" v-html="noticeContent.content"></div>

3. 点击的事件中进行判断

bindClick (e) {
    const tagName = e.target.dataset.tagname
    if (tagName === 'authorizationExtension') {
      window.open('/account-center', '_blank')
    } else {
      console.log('未匹配')
    }
  }

以上 over ~