[Vuejs]-Vue.js v-for in component renders when I visit the URL through a router-link but if I type the URL manually or refresh the page, v-for doesn't render

by

1👍

✅

These might be because of these issues you encountered.

First: that component is not the one that dispatched your getFullChampions function in your vuex, might be in other component.

Second is that, you are already assigning the value of champions wherein the state fullChampions is not updated.

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

Try this one might help you

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

Last is to to do first a condition above your v-for to prevent the element

<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>
👤Qonvex620

0👍

Can you try to add this:

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

after yuor data?

Upd.

If you are calling getFullChampions() action, then you can call it within watcher of my example instead of assigning to this.champions.

👤webprogrammer

Leave a comment