Vue3 CompositionAPI "quizz is not defined" when calling a function from script

Question

For some reason, I receive "Uncaught ReferenceError: quizz is not defined" if I call a function.

<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>

What should I do? Thanks!

If I do the router.push directly to the @click, it works and takes me to the next page (/quizz/:id)

Nikola Pavicevic · Accepted Answer · 2022-11-28 08:48:20Z

1

Try with ${props.quizz.id} in your function

answered Nov 28, 2022 at 8:48

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue3 CompositionAPI "quizz is not defined" when calling a function from script

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related