admin管理员组文章数量:1318332
My question is similar to the one listed here: Vue.js - Destroy a cached ponent from keep alive
I am also creating a sort of Tab System using the Vue router so the code looks like so:
//My Tab ponent
<template>
<tab>
<tab-selector />
<keep-alive>
<router-view />
<!-- This router view is used to render one of the childRoutes of the main TabRoute -->
</keep-alive>
</tab>
</template>
<script>
handleTabClose() {
//Close tab logic
this.$destroy();
//Insert router push to be one of the other tabs that have not been closed.
}
</script>
Outline of how the route used by the vue-router would look like:
{
path: "/tab",
name: "TabComponent",
ponent: () => import("InsertComponentPath"),
children: [{TabRoute1, TabRoute2, TabRoute3}]
},
Keep alive is being used to maintain State when switching tabs (switching childroutes).
I want to remove the childRoute/Component from cache when the tab is closed but using this.$destroy
in my tab ponent it seems to be destroying the whole Tab ponent and not the child ponent within it.
The V-if solution also stated in this and other stack overflow questions will not work as I only want to remove this specific tab from memory and this removes all tabs.
Thanks for any help.
My question is similar to the one listed here: Vue.js - Destroy a cached ponent from keep alive
I am also creating a sort of Tab System using the Vue router so the code looks like so:
//My Tab ponent
<template>
<tab>
<tab-selector />
<keep-alive>
<router-view />
<!-- This router view is used to render one of the childRoutes of the main TabRoute -->
</keep-alive>
</tab>
</template>
<script>
handleTabClose() {
//Close tab logic
this.$destroy();
//Insert router push to be one of the other tabs that have not been closed.
}
</script>
Outline of how the route used by the vue-router would look like:
{
path: "/tab",
name: "TabComponent",
ponent: () => import("InsertComponentPath"),
children: [{TabRoute1, TabRoute2, TabRoute3}]
},
Keep alive is being used to maintain State when switching tabs (switching childroutes).
I want to remove the childRoute/Component from cache when the tab is closed but using this.$destroy
in my tab ponent it seems to be destroying the whole Tab ponent and not the child ponent within it.
The V-if solution also stated in this and other stack overflow questions will not work as I only want to remove this specific tab from memory and this removes all tabs.
Thanks for any help.
Share Improve this question asked Apr 20, 2021 at 13:46 JahsonJahson 1392 silver badges15 bronze badges 3- Can I ask why? There might be another solution, if we know why you want to "remove" a ponent from cache. – tauzN Commented Apr 20, 2021 at 16:17
- @tauzN Sorry for the late reply, the reason why is because some cases when a tab is closed and opened again it'll open in the same state it was closed in but ideally we want it to open fresh like it did before. – Jahson Commented Apr 24, 2021 at 8:23
- 1 Can you prepare some sample code on codepen or codesandbox? – Adam Orłowski Commented Apr 26, 2021 at 12:25
4 Answers
Reset to default 6I found a solution using the include
argument in keep-Alive https://v2.vuejs/v2/api/#keep-alive
I kept an array of currently active Tabs using router.getmatchedponents()
to get the ponent name of the currently opened tab.
And then in my handleClose()
function, I remove the tab that has been closed from the include
array.
Final Implementation looked somewhat like so:
//My Tab ponent
<template>
<tab>
<tab-selector />
<keep-alive :include="cacheArr">
<router-view />
<!-- This router view is used to render one of the childRoutes of the main TabRoute -->
</keep-alive>
</tab>
</template>
<script>
private cacheArr = []
//Called whenever a new tab is opened
handleOpen() {
//Add current Tab to this.cachArr
this.cachArr.push(router.getmatchedponents().pop().name);
}
//Called whenever new tab is closed.
handleTabClose(name) {
//Close tab logic
//Remove Tab being closed from this.cacheArr
this.cacheArr.splice(this.cacheArr.indexOf(name), 1);
}
</script>
deactivated() {
this.$destroy();
},
in a child ponent works perfectly fine.
While working with Parent and Child ponents, I've almost always have to use vuex to update the chain processes from happening with updates to any of the underlying ponents rendered on the page.
After making updates to the Vuex, I usually update the key of the ponent in context to re-render it.
Vuex seems to resolve the state management issues in most cases and you won't have to use keep-alive
after that.
It always solves the problem. I'm hoping this could help you if I've understood your problem.
If I've misunderstood it please ment and I'll remove it.
Why don't you remove the child from the router that should automatically update your ponent you can try router.replaceRoutes(routes)
本文标签: javascriptVuejsRemove a child component loaded from keepaliveStack Overflow
版权声明:本文标题:javascript - Vue.js - Remove a child component loaded from keep-alive - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742043358a2417650.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论