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.
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>
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.