Новичок в Vue, и я не нашел ничего, что конкретно касалось бы моей проблемы.
У меня есть простое приложение Vue, использующее VueRouter, где я пытаюсь создать спортивный турнир в стиле скобок, в котором записываются результатыразличные игры в турнире.
Мне нужно сделать асинхронный осевой вызов сервера, чтобы получить информацию о конкретной игре. Я не знаю, как правильно обновить мой компонент, чтобы получить эту информацию.
App.vue очень прост. Домашняя страница - это просто обзор скобки
<template>
<div id="app">
<div id="nav">
<router-link :to="{ name: 'bracket'}">Bracket</router-link>
</div>
<router-view />
</div>
</template>
У меня есть компонент вида Bracket.vue, и на данный момент все, что мне нужно, это представление, это предоставление ссылок на различные матчи в турнире. .
Я сделал эту работу довольно динамично следующим образом:
<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>
Когда нажата ссылка, я открываю другой компонент представления, Matchup.vue, который я хотел бы отобразить определенным образом. Данные о матче. (MatchupService является экземпляром Axios API)
Я передаю раунд # и игру # как реквизиты через роутер-линк. Они прекрасно загружаются в Matchup.vue.
Однако, когда я пытаюсь сделать асинхронный вызов для получения данных соответствия, ничего не происходит. свойство matchup никогда не обновляется, ни по ссылке, ни когда-либо. Поэтому я либо ничего не получаю (когда использую троичную систему, как показано ниже), либо ошибку, если я просто пытаюсь использовать matchup значение
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>
Я пыталсяЕсть много разных подходов к этому: обновленные и созданные против других ловушек, я пытался обновить свойство после загрузки и привязывать его к v-if и т. д.
Я просто совершенно забит этим,надеясь на помощь.