Vue - передача параметров в маршрут, поскольку реквизиты не определены - PullRequest
Новая
       15

Vue - передача параметров в маршрут, поскольку реквизиты не определены

0 голосов
/ 09 марта 2019

Я передаю параметры в именованный маршрут из компонента: 

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

Маршрут настроен так: 

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

Но компонент не отображает реквизиты, когдассылка: 

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

Журнал в смонтированном методе возвращает undefined.

Однако, когда я смотрю в Vue dev-tools на компонент TeamInfo, я вижу, что оба реквизитане определено, но параметры заполнены.

Я хотел бы иметь возможность использовать реквизиты в компоненте, а также заполнить URL-адрес идентификатором команды.

1 Ответ

2 голосов
/ 09 марта 2019

Вы должны использовать режим boolean для передачи параметров как URL, так и реквизитам. Вы также должны определить параметр внутри path, чтобы иметь к нему доступ. Вот пример , который показывает, как его использовать. 

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

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

...