带参数的函数不在 Javascript AddEventListener 中运行

Question

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?

Answer 1

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 .