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>