How to access a vue function from onclick in javascript?

Question

I am building a vue component and I want to call a function defined in Vue methods by calling the onClick attribute when modifying innerHTML. However, it gives me error, "showModal is not defined" as shown below.

Here is my showModal function, I am just trying to console some data to make sure that the function is called:

methods: {

      showModal: function() {
            console.log("function is called")
            //this.$refs.myModalRef.show();
            //this.account=account;
        }
}

and here is where i am trying to call that function in js by onclick function:

var inputText = document.getElementById("fileContents");
        var innerHTML = inputText.innerHTML;
 for(var i=0;i<this.violations.length;i++){

          var index=innerHTML.indexOf(this.violations[i]);
          if(index>0) {
            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);

            inputText.innerHTML = innerHTML;
          }

        }

error: (index):1 Uncaught ReferenceError: showModal is not defined at HTMLAnchorElement.onclick ((index):1)

Am I calling it in a wrong way?

Thanks!

Edit:

Thanks to @Ferrybig - I know I am able to call the function, however I have another problem; I want to pass the current word that I am changing its html to the funciton like this: onclick='myMethod(violations[i])' I tried setting this.violations array to be global like this:

window.violations=this.violations;

but again, (variable i) which is the index of current word in the array, is not global variable to be passed to 'myMethod' and it says (i is not defined). I cannot set i to global variable because it's an index incremented each time in the loop. I thought about sending the current index of the tag I am editing to the function, 'myMethod', so I can track which tag I am in and its known by the html in the vue component but not sure how to do that..

Any other suggestions?

Answer 1

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.