Javascript 当我通过路由器链接访问URL时，Vue.js v-for in-component会呈现，但如果我手动键入URL或刷新页面，v-for不会'；不渲染

我有一个非常简单的视图，显示某个游戏中所有角色的图标。如果我访问通过路由器链接显示该视图的URL，一切正常，我看到图标，但是，如果我刷新页面，图标就会消失

如果我手动键入

www.example.com/champions

，它们也不会渲染。为什么会发生这种情况

我的组成部分：

<template>
    <div class='wrapper'>
        <div class="champions-container">
            <div v-for='champion in champions' class="champion">
                <img class='responsive-image' :src="'http://ddragon.leagueoflegends.com/cdn/' + $store.getters.version + '/img/champion/' + champion.image.full" alt="">
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                champions: this.$store.state.fullChampions
            }
        }
    }
</script>

---

您可以尝试添加以下内容：

watch: {
    $route: function(val, OldVal){
        this.champions = this.$store.state.fullChampions;
    }
},

在YOUR

数据之后

Upd

---

如果您正在调用getFullChampions（）操作，那么您可以在我的示例的watcher中调用它，而不是分配给这个.champions。

这可能是因为您遇到了这些问题

首先：该组件不是在vuex中调度getFullChampions函数的组件，可能在其他组件中

第二个是，您已经在分配冠军的值，其中状态fullChampions未更新

this.champions: this.$store.state.fullChampions // state.fullChampions might not yet updated.

试试这个也许对你有帮助

watch: {
      '$store.state.fullChampions': function() {
           this.champions = this.$store.state.fullChampions  
      },
}

最后一个是首先在v-for上方执行一个条件，以防止该元素

<div class="champions-container" v-if=""$store.getters.version>
    <div v-for='champion in champions' class="champion">
        <img class='responsive-image' :src="'http://ddragon.leagueoflegends.com/cdn/' + $store.getters.version + '/img/champion/' + champion.image.full" alt="">
    </div>
</div>

在哪里可以访问getFullChampions（）？@Qonvex620在我的App.vue文件中的挂载钩子中。由于某种原因，我在添加观察者时遇到语法错误-语法错误：C:\MAMP\htdocs\League Of Legends Frontend\src\views\Champions.vue:预期的意外标记”；“（20:26）18 |观察：{19 |'$store.state.fullChampions'（）{>20 | this.champions:this.$store.state.fullChampions{^21}，22}

<div class="champions-container" v-if=""$store.getters.version>
    <div v-for='champion in champions' class="champion">
        <img class='responsive-image' :src="'http://ddragon.leagueoflegends.com/cdn/' + $store.getters.version + '/img/champion/' + champion.image.full" alt="">
    </div>
</div>