Creating a vue component and trying to call a function defined in Vue methods using the onClick attribute when modifying innerHTML is resulting in an error message stating "showModal is not defined". Here is the showModal function where I'm simply trying to console some data:
methods: {
showModal: function() {
console.log("function is called")
//this.$refs.myModalRef.show();
//this.account=account;
}
}
This is where I am attempting to call that function in JavaScript using onclick:
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 message: Uncaught ReferenceError: showModal is not defined at HTMLAnchorElement.onclick ((index):1)
Am I calling it incorrectly?
Edit:
Credits to @Ferrybig - I can successfully call the function. However, another issue arises, where I want to pass the current word being modified as an argument to the function like so: onclick='myMethod(violations[i])'. I attempted to make the violations array global by doing:
window.violations=this.violations;Yet, (variable i) which is the index of the current word in the array, isn't a global variable to be passed to 'myMethod' causing it to say (i is not defined). Since i is an incrementing index within the loop, setting it as global isn't feasible. Considering passing the current tag's index being edited to the 'myMethod' function for tracking purposes. Any alternative suggestions?