vue.js - 如何在 vuejs 中更新动态路由器链接的组件属性
问题描述
对 Vue 来说太新了,还没有找到任何专门解决我的问题的东西。
我有一个使用 VueRouter 的简单 Vue 应用程序,我正在尝试生成一个括号式的体育锦标赛,记录锦标赛中不同比赛的结果。
我需要对服务器进行异步 axios 调用以获取有关特定游戏的信息。我不知道如何正确更新我的组件以获取此信息。
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
值,我要么一无所获(当我使用下面的三元组时)或错误
比赛.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 等。
我只是对此完全受阻,所以希望得到一些帮助。
解决方案
看起来你需要beforeEnter
在你的 router.js 文件中使用导航钩子,或者你可以beforeRouteEnter
直接在你的组件文件中使用钩子。(注意!在组件文件中使用 beforeRouteEnter 您无法访问“this”,因此,如果您想在应用程序中存储一些数据,也许有理由使用 Vuex)。在将用户重定向到特定页面之前,您可以在那里定义/获取/设置任何数据。通过这种方式,您可以执行任何您想要的操作并在重定向之前进行设置。
更多关于你可以在这里找到:
https://router.vuejs.org/guide/advanced/navigation-guards.html
推荐阅读
- python - wxPython:如何使sizer完全填充其父级
- vba - 在将记录集值传递给被调用函数之前,如何有效地检查记录集值是否为空?
- postgresql - tstzrange 的 Postgres 过滤未结束
- go - 如何访问 sql.Rows 的未转换的 driver.Value 切片
- pandas - 如何在使用 pd.date_range 创建的熊猫中从 DateTimeIndex 中切片元素
- javascript - 如何使用 jest 测试 GoogleMap
- javascript - 如何获取日期输入的值并将其保存到全局变量中?
- git - 使用 .gitignore 和 .git/info/exclude 的步骤
- amazon-web-services - 在在线控制台中创建用户时是否会触发自定义用户池触发器?
- excel - Excel偏移公式本身在一个单元格中