Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

175
Visualizações
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
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda