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

Question

在 NuxtJS 中，当使用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...
}

所有代码都在methods: {} ，单击时出现以下错误。

Uncaught TypeError: this.handleSubmit is not a function at SVGSVGElement.eval

我该如何解决这个问题，我的代码有什么问题？

Answer 1

解决这个问题的方法是使用带有HTML元素的Vue.js ，而不是通过.js文件。 使用v-on:click ( se Vue docs ) 我们可以在用户单击HTML元素时运行一个函数。

<svg v-for="(el, i) in 5" :key="i" :data-rating="el" @click="handleSubmit(recipe, el)">
  <polygon />
</svg>

注意： v-on:click使用ESLint @click