[Vuejs]-How can I preserve data between switching between tabs in Vue?

1👍

You can use KeepAlive to do this.

<KeepAlive> is a built-in component that allows us to conditionally
cache component instances when dynamically switching between multiple
components.

If your tab components are dynamic then use KeepAlive like this-

<KeepAlive>
  <component :is="tabComponent" />
</KeepAlive>

If you are using tab components individually then do like this-

<KeepAlive>
  <tab-a></tab-a>
  <tab-b></tab-b>
</KeepAlive>

You can read more about KeepAlive in the documentation.

Leave a comment