带参数的函数不在 运行 里面 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

解决此问题的方法是将 Vue.js 与 HTML 元素一起使用，而不是通过 .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 更改为 @click 和 ESLint。