1. 程式人生 > 其它 >vue在v-html中繫結的點選事件失效處理方法

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>

實測有效

交流扣扣:1328542512