En NuxtJS, estoy tratando de ejecutar una función con dos parámetros cuando se hace clic en un elemento con 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... } Todo el código está dentro de los methods: {} y aparece el siguiente error al hacer clic.
Uncaught TypeError: this.handleSubmit is not a function at SVGSVGElement.eval¿Cómo puedo solucionar el problema y cuál es el problema con mi código?
Una forma de solucionar este problema es usar Vue.js con el elemento HTML en lugar de a través de un archivo .js . Con v-on:click ( se Vue docs ) podemos ejecutar una función cuando el usuario hace clic en el elemento HTML .
<svg v-for="(el, i) in 5" :key="i" :data-rating="el" @click="handleSubmit(recipe, el)"> <polygon /> </svg> Nota: v-on:click cambia a @click con ESLint .