I have the following View :
<template>
<div class="home">
<Quiz :quizID="this.$route.params.id"/>
<p>{{this.$route.params.id}}</p>
</div>
</template>
The value of this.$route.params.id is correctly displayed between the <p> tags. But the component above doesn't get this value as a parameter. If I force it by writing <Quiz :quizID="3"/>, it works and the component Quizwith the corresponding ID is displayed.
But as soon I put a variable, nothing works anymore.
Edit : As suggested, here is the Quiz component
<div>
<div class="container flex justify-center mx-auto">
<div class="flex flex-col">
<div class="w-full">
<div class="border-b border-gray-200 shadow">
<table>
<tbody class="bg-white">
<tr class="whitespace-nowrap" v-for="player in players" :key="player.quizID">
<td class="px-6 py-4 text-sm text-gray-500" v-if="player.quizID === quizID">
{{player.quizID}}
</td>
<td class="px-6 py-4" v-if="player.quizID === quizID">
{{player.name}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Quiz',
data(){
return {
quizzes: [],
players: []
}
},
props: [
'quizID'
],
methods: {
async fetchQuizzes() {
const res = await fetch(`http://127.0.0.1:8000/api/quizs`)
const data = await res.json()
return data.data
},
async fetchPlayers() {
const res = await fetch(`http://127.0.0.1:8000/api/players`)
const data = await res.json()
return data.data
}
},
async created(){
this.quizzes = await this.fetchQuizzes();
this.players = await this.fetchPlayers();
},
}
</script>
What's wrong?