Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

174
Views
Biding Vue-router params in a component

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?

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!