I am building a vue ponent 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 ponent but not sure how to do that..

Any other suggestions?

I am building a vue ponent 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 ponent but not sure how to do that..

Any other suggestions?

• javascript
• function
• vue.js
• onclick

• Depending on how it's added to the DOM, the link with the onclick event will not be interpreted by vue, and the onclick event will not fire. Try adding links to your page using of vue.js: <div v-for="v in violations"><a @click="showModal">text</a></div> – ebbishop Commented Apr 9, 2019 at 20:32

4 Answers 4

When using Vue templates, you get access to easy to use syntaxes that decrease programming time, and it is highly remended 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 ponent, but supporting this bees way harder, and you should really use proper Vue ponents 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"

Hi Just try to remove href='#' and instead add href="javascript:void(0)" along with @click="showModal" This may help

You have to use Vue syntax onClick like Method Event Handlers So

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);