CODEWITHSUNDEEP
javascriptvue.jscomponentsvue-router
dmitriversikerq123
dmitriversikerq123

Reputation: 11

Why component doesn't render when I change the route?

I have a template, and there is a component:

        <super-visor
            v-if="!top10ModeActivated"
            v-for="cart in getCarts(index + 1)"
            :cart="cart"
            :key="cart.position"
        ></super-visor>

As you can see, this component renders when top10ModeActivated is only false;

   computed: {
        top10ModeActivated() {
            return this.$store.state.moduleSearch.top10ModeActivated;
        },
   }

I put debugger to top10ModeActivated and it works only when component renders only for the first time. So I see my component, only when I refresh the page but not when I change the route.

Can anybody help me and describe me how I can fix this? Because I'm new to VueJS.

Upvotes: 0

Views: 97

Answers (2)

Oleg Barabanov
Oleg Barabanov

Reputation: 2764

Use methods because computed properties are cached. See below:

   methods: {
        top10ModeActivated() {
            return this.$store.state.moduleSearch.top10ModeActivated;
        },
   }

and

        <super-visor
            v-if="!top10ModeActivated()"
            v-for="cart in getCarts(index + 1)"
            :cart="cart"
            :key="cart.position"
        ></super-visor>

Upvotes: 1

equi
equi

Reputation: 894

Accessing store state directly from computed property doesn't make it reactive. Use getters instead. Create a Vuex getter which would return top10ModeActivated and then call that getter in a computed property to have it reactive.

Upvotes: 0

Related Questions