vue在v-html中綁定的點擊事件失效處理方法

實際開發中遇見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>

 

實測有效