When attempting to call a function, I am encountering an error that says "Uncaught ReferenceError: quizz is not defined."
<script setup>
import { defineProps } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const props = defineProps(["quizz"]);
const navigateToQuiz = () => {
router.push(`/quizz/${quizz.id}`);
};
</script>
<template>
<div class="card" @click="navigateToQuiz">
<img :src="quizz.img" :alt="quizz.name" />
<div class="card-text">
<h2>{{ quizz.name }}</h2>
<p>{{ quizz.questions.length }} questions</p>
</div>
</div>
</template>
Any suggestions on how to resolve this issue? Thank you!
If I directly use the router.push within the @click event handler, it successfully redirects me to the next page (/quizz/:id)