How to access a vue function from onclick in javascript?

When using Vue templates, you get access to easy to use syntaxes that decrease programming time, and it is highly recommended that you start renderering your page using Vue instead.

In the case you are unable to use Vue for renderering your page, you can still use other bad techniques:

First, start by adding a created lifecycle method for created that moves a reference for your Vue method up to the global scope: created(){window.myMethod =this.myMethod;}

Since we then added the method to the global scope, you can just reference it using mymethod inside your vanilla onclick handler.

Note that the above workaround does not support multiple instances of your Vue component, but supporting this becomes way harder, and you should really use proper Vue components in that case.

You are not using a Vue handler in your call. Change onclick to @click

so:

@click="showModal"

or, alternatively,

v-on:click="showModal"

You have to use Vue syntax onClick like Method Event HandlersSo

innerHTML = innerHTML.substring(0, index) +"<a href='#' onclick='showModal'>"+ "<span  style=\"background-color: yellow\">" + innerHTML.substring(index, index + this.violations[i].length) + "</span>" + "</a>" + innerHTML.substring(index + this.violations[i].length);

need change to

innerHTML = innerHTML.substring(0, index) +"<a href='#' v-on:click="showModal">"+ "<span  style=\"background-color: yellow\">" + innerHTML.substring(index, index + this.violations[i].length) + "</span>" + "</a>" + innerHTML.substring(index + this.violations[i].length);