In NuxtJS I am trying to run a function with two parameters when an element is clicked with an AddEventListener.
async handleSubmit(recipe, userRating) {some code...}
setup(recipe) {
document.querySelectorAll('.recipe-rating > .star').forEach(function(el) {
el.addEventListener('click', function(el) {
const userRating = el.currentTarget.getAttribute('data-rating');
this.handleSubmit(recipe, userRating);
}, false);
});
...more code...
}
All of the code is within methods: {}, and I get the following error when clicking.
Uncaught TypeError: this.handleSubmit is not a function at SVGSVGElement.eval
How can I fix the problem, and what is the problem with my code?
On way around this problem is to use Vue.js with the HTML element instead of trough a .js file. With v-on:click (se Vue docs) we can run a function when the user clicks the HTML element.
<svg v-for="(el, i) in 5" :key="i" :data-rating="el" @click="handleSubmit(recipe, el)">
<polygon />
</svg>
Note: v-on:click changes to @click with ESLint.