Search code examples
vue.jsvue-componentvuejs3

Vue JS keep tab component alive

All,

I need some help making keepAlive in VueJS3 composition api work.

I have a page to configure profiles ( business feature ) where I have some tabs created dynamicly based on user selection from a drop down.

Here is my profile model :

enter image description here

So Each tab is an entry to the realm attribute array.

enter image description here

The VTAB component I am using is from vuero library : https://vuero.cssninja.io/

That I am using this way :

enter image description here

While making modifications, the user should be able to switch tabs without losing the modification he made while switching tabs.

From official documentation, keepalive is the directive to be used for such use case. Unfortunatly I am not able to make it work. I lose all the modifications when I switch the tab.

Do you have any suggestions, to make this work .

Thanks A lot.

Solution

  • It seems to be a limitation from vuero component. I went with a cutsom solution. By listening on the onBeforeUnmont

    enter image description here