events - Vue中如何在 “v-html”绑定(bind)点击事件

Question

我在jsfiddle中有一个简单的例子，如例子中所述，我想通过v-html插入元素，然后在插入元素中绑定(bind)事件。除了通过这种方式添加id操作dom，还有没有更好的办法？

https://jsfiddle.net/limingyang/bnLmx1en/1/

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
    <div v-html="link"></div>
</div>

var app = new Vue({
    el: '#app',
    data: {
        link: '<a href="javascript:void(0)">click me</a>'
    }
})

Answer 1

您可以添加 ref在您的 div 上，并像在常规 JavaScript 中一样操作其子元素。例如，您可以为 mounted Hook 中的链接设置事件监听器:

var app = new Vue({
  el: '#app',
  data: {
    link: '<a href="#">click me</a>'
  },
  mounted() {
    this.$refs['mydiv'].firstChild.addEventListener('click', function(event) {
      event.preventDefault();
      console.log('clicked: ', event.target);
    })
  }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
    <div v-html="link" ref="mydiv"></div> <!-- notice 'ref' -->
</div>