为啥当我更改路由时组件不呈现?
Posted
技术标签:
【中文标题】为啥当我更改路由时组件不呈现?【英文标题】:Why component doesn't render when I change the route?为什么当我更改路由时组件不呈现? 【发布时间】:2021-12-05 12:44:07 【问题描述】:我有一个模板,还有一个组件:
<super-visor
v-if="!top10ModeActivated"
v-for="cart in getCarts(index + 1)"
:cart="cart"
:key="cart.position"
></super-visor>
如你所见,这个组件在top10ModeActivated
只有false
时渲染;
computed:
top10ModeActivated()
return this.$store.state.moduleSearch.top10ModeActivated;
,
我将debugger
放在top10ModeActivated
上,它仅在组件第一次呈现时才有效。所以我看到我的组件,只有当我刷新页面而不是当我改变路由时。
谁能帮助我并描述我如何解决这个问题?因为我是 VueJS 的新手。
【问题讨论】:
【参考方案1】:使用方法,因为computed properties are cached。见下文:
methods:
top10ModeActivated()
return this.$store.state.moduleSearch.top10ModeActivated;
,
和
<super-visor
v-if="!top10ModeActivated()"
v-for="cart in getCarts(index + 1)"
:cart="cart"
:key="cart.position"
></super-visor>
【讨论】:
我提出了你的建议,但我遇到了同样的问题。 我删除了条件,只有在重新加载页面时才能看到此模板。 一个属性是可能的“.top 10 Mode Activated”不是反应性的。你初始化了吗? => ...状态:moduleSearch:top10ModeActivated:'...',... ... 但即使我用这个道具删除了条件,它也不起作用。当我更改路线时,组件似乎永远不会呈现。只有当我重新加载页面时。【参考方案2】:直接从计算属性访问存储状态不会使其反应。改用吸气剂。 创建一个返回 top10ModeActivated 的 Vuex getter,然后在计算属性中调用该 getter 以使其具有响应性。
【讨论】:
以上是关于为啥当我更改路由时组件不呈现?的主要内容,如果未能解决你的问题,请参考以下文章