Vue - passing params to route as props is undefined

Question

I am passing params to a named route from a component:

      <v-list-tile
        :key="team.logo_url"
        :to="{name: 'team', params: {
          id: team.id,
          name: team.name
        }}"
        avatar
      >

The route is sett up likes so:

{
  path: "/team",
  name: "team",
  component: TeamInfo,
  props: {
    id: true,
    name: true
  }
}

But the component does not render the props when referenced:

<template>
  <v-container>
      <p>{{ id }}</p>
  </v-container>
</template>

<script>

  import TeamService from '@/services/TeamService';

  export default {
    props: ['id', 'name'],
    data: () => ({
        players: [],
        games: []
    }),
    mounted() {
        console.log(this.id);
    }
  }
</script>

The log in the mounted method returns undefined.

However when I look in Vue dev-tools at the TeamInfo component I can see that both props are undefined but the params are populated.

I would like to be able to use the props in the component and also populate the URL with the team ID.

Samuel Vaillant Samuel Vaillant · Accepted Answer · 2019-03-09T13:23:36

You have to use the boolean mode for to pass the params to both the URL and props. You also have to define the parameter inside the path to be able to access it. Here is an example that shows how to use it.

{
  name: "team",
  path: "/team/:id",
  component: TeamInfo,
  props: true,
}

https://router.vuejs.org/guide/essentials/passing-props.html#boolean-mode

Vue - passing params to route as props is undefined

1 Answers