There is a block of HTML coming from the server that needs to trigger a method or function when links embedded in the HTML are clicked.
The HTML is displayed in my .vue file as follows:
<template>
<div v-html="myhtml"></div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
myhtml: null
}
},
created () {
this.refreshHTML()
},
methods: {
refreshHTML () {
axios.get()// get my html
this.myhtml = response.data
},
myFunction () {
//do my function stuff here...
}
}
}
</script>
I want to attach an onclick event in the fetched HTML to call my function like this:
<a href="myurl" onclick='event.preventDefault(); myFunction(this.href);'>link</a>
However, attempting to do so results in:
ReferenceError: Can't find variable: myFunction