如何在 vuejs 中更新动态路由器链接的组件属性

Question

So new to Vue and haven't found anything that specifically addresses my issue.

I have a simple Vue app using VueRouter where I am trying to generate a bracket-style sports tournament that records the outcomes of the different games in the tournament.

I need to make an asynchronous axios call to a server to get info on a specific game. I do not know how to update my component properly to get this info.

App.vue is very simple. The home page is just an overview of the bracket

<template>
  <div id="app">
    <div id="nav">
      <router-link :to="{ name: 'bracket'}">Bracket</router-link>
    </div>
    <router-view />
  </div>
</template>

I have a view component, Bracket.vue, and, for now, all I want this view do is provide links to the different matchups in the tourney.

I have made this work pretty well dynamically as follows:

<template>
  <div class="home">
    <div id="nav">
      <div v-for="round in rounds" :key="round">
        <router-link v-for="game in gamesPerRound" :key="matchupKey(round, game)" :to="{ name: 'matchup', params: {round: round, game: game} }">Matchup {{ round }} {{ game }}</router-link>
      </div>
    </div>
  </div>
</template>

When link is clicked, I pull up another view component, Matchup.vue, which I would like to display certain data about the matchup. (MatchupService is an axios API instance)

I pass the round # and the game # as props via router-link. These load fine in the Matchup.vue.

However, when I try to make an asynchronous call to get the matchup data, nothing happens. the matchup property never updates, not on the link click or ever. So I either get nothing (when I use a ternary as per below) or an error if I just try to use the matchup value

Matchup.vue

<template>
      <div class="matchup">
        <h1>Round {{ round }}</h1>
        <h2>Game {{ game }}</h2>
        <h6>Team 1: {{matchup.teams ? matchup.teams[0]: 0}}</h6>
        <h6>Team 2: {{matchup.teams ? matchup.teams[1] : 0}}</h6>
      </div>
    </template>

    <script>
    import MatchupService from '@/services/MatchupService.js'

    export default {
      props: ["round", "game"],
      data() {
        return {
          matchup: {},
        }
      },
      async updated() {
          let matchups = await MatchupService.getMatchups()
          this.matchup = matchups.data.rounds[this.round].games[this.game]
      },
    }
    </script>

I have tried many different approaches on this: updated vs. created vs. other hooks, I've tried to update a property post-load and hook that to v-if, etc.

I am just totally stymied on this so hoping for some help.

Answer 1

Looks like you need to use navigation hook beforeEnter in your router.js file or you can use beforeRouteEnter hook directly in your compoennt file. (NOTICE, Using beforeRouteEnter in a component file you can't access 'this', so maybe. there is a reason to use Vuex if you want to store some data within serfing your app). There you can define/fetch/set any data before redirect user to a specific page. By this way you do any actions you want and set it before redirecting.

More about you can find here:

https://router.vuejs.org/guide/advanced/navigation-guards.html