How to bind a click event on “v-html” in Vue How to bind a click event on “v-html” in Vue vue.js vue.js

How to bind a click event on “v-html” in Vue


You can add a ref on your div, and operate with its children elements like you do in regular JavaScript. For example, you can set an event listener for a link inside 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>