How can I preserve data between switching between tabs in Vue?

Question

I'm trying to learn some Vue, I have tab component it has 2 tabs with some dropdowns and text fields inside, the problem is when I switch between tabs it loss data like selected items from dropdowns or text values, I've tried with v-model but nothing, any help?

Here is the tab view

<script setup>
import { ref } from 'vue';

const nestedRouteItems = ref([
    {
        label: 'Personal',
        to: '/uikit/ficha'
    },
    {
        label: 'Seat',
        to: '/uikit/ficha/seat'
    },
]);

</script>

<template>
    <div class="grid">
        <div class="col-12 md:col-12">
            <div class="card p-fluid">
                <h5>Ficha</h5>
                <div class="col-12 md:col-12">
                    <div class="card card-w-title">
                        <h5>Tab container</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur.</p>
                        <TabMenu :model="nestedRouteItems" />
                        <router-view />
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</template>

Here is the content of first tab:

<template>
    <div class="flex align-items-center py-5 px-3">
        <div class="card p-fluid" style="width:800px">
                <h5>Datos personales</h5>
                <div class="field">
                    <label for="name1">Nombre</label>
                    <InputText id="name1" type="text" />
                </div>
            </div>
    </div>
</template>

Here is the content of second tab:

<script setup>
import { ref } from 'vue';

const dropdownItems = ref([
    { name: 'Principal', code: 'Principal' },
    { name: 'Laboral', code: 'Laboral' },
    { name: 'Familiar', code: 'Familiar' }
]);

const dropdownItem = ref(null);

</script>
<template>
    <div class="flex align-items-center py-5 px-3">
        <div class="card p-fluid" style="width:800px">
            <h5>Domicilio</h5>
            <div class="field">
                <label for="tipoDomicilio">Tipo de domicilio</label>
                <Dropdown id="tipoDomicilio" v-model="dropdownItem" :options="dropdownItems" optionLabel="name" placeholder="Elegir opción..."></Dropdown>
            </div>
        </div>
    </div>
</template>

Does this answer your question? [Vue: shared data between different pages](https://stackoverflow.com/questions/40953496/vue-shared-data-between-different-pages) — Tobi208, Jan 21 '23 at 01:16
Look at https://stackoverflow.com/questions/65619181/how-to-make-certain-component-keep-alive-with-router-view-in-vue-3 — Moritz Ringler, Jan 21 '23 at 11:25
thanks but I can't figure it out, I need to learn a lot, I can't understand any of the examples above, I don't know how to fix my code with that. Thank you anyways!!!! — Pablo Neutrino Insaurralde, Jan 21 '23 at 12:51

score 1 · Answer 1 · answered Jan 23 '23 at 05:02

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.

How can I preserve data between switching between tabs in Vue?

1 Answers1