Vue.js - Remove a child component loaded from keep-alive

Question

My question is similar to the one listed here: Vue.js - Destroy a cached component from keep alive

I am also creating a sort of Tab System using the Vue router so the code looks like so:

//My Tab component 
<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",
        component: () => 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 component it seems to be destroying the whole Tab component and not the child component 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.

Answer 1

I found a solution using the include argument in keep-Alive https://v2.vuejs.org/v2/api/#keep-alive

I kept an array of currently active Tabs using router.getmatchedcomponents() to get the component 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 component 
<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.getmatchedcomponents().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>

Answer 2

deactivated() {
    this.$destroy();
},

in a child component works perfectly fine.

Answer 3

While working with Parent and Child components, I've almost always have to use vuex to update the chain processes from happening with updates to any of the underlying components rendered on the page.

After making updates to the Vuex , I usually update the key of the component 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 comment and I'll remove it.

Answer 4

Why don't you remove the child from the router that should automatically update your component you can try router.replaceRoutes(routes)