[英]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
;如您所见,该组件在
top10ModeActivated
仅为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.我将
debugger
放在top10ModeActivated
,它仅在组件第一次呈现时才起作用。 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.
因为我是 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.
创建一个返回 top10ModeActivated 的 Vuex getter,然后在计算属性中调用该 getter 以使其具有响应性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.