How to update properties of component for dynamic router-link in 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.

Have you tried using watch for prop changes (round or game respectivelly), your situation is not completely clear but it may be that the component is loaded before an axios request has returned the data you want. As such, at the time of created or whatever the relevant data may not be in the props yet, and when they get there from a parent component, nothing happens. Watch can also a decent tool for debugging this sort of thing. — Andris Leduskrasts

Vadym Semenets Vadym Semenets · Accepted Answer · 2019-11-01T12:30:18

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

How to update properties of component for dynamic router-link in vuejs

1 Answers