vue在v-html中绑定的点击事件失效处理方法

Z时代
2024-01-10
分类：综合

vue

实际开发中遇见v-html中绑定的点击事件无效

主要代码如下：

vue中代码

/*@autor：dantaxiaozi @time：2021/4/28 @desc： 解决v-html中点击事件无效的方法*/
<template>
  <div id="announcementList">
    <div class="affiche_text">
      <p v-html="textContent" @click="triggerClick"></p>
    </div>
  </div>
</template>
<script>
export default {
  name: "announcementList",
  props: {},
  data() {
    return {
      textContent:"测试vue中v-html中绑定点击事件"+"<a style=\'padding-left:15px;\' href=\'###\' class=\'testClass\' id=" + 10001 + ">【详细】</a>",
    };
  },
  filters: {},
  computed: {},
  created() {
  },
  mounted() {
  },
  beforeDestory() {
  },
  methods: {
    // 触发v-html中的点击事件
    triggerClick(event) {
      console.log("获取标签名="+event.target.className) // 获取标签名
      console.log("获取class属性名="+event.target.nodeName) // 获取class属性名
      console.log("获取id值="+event.target.id) // 获取id值
    }
  }
};
</script>