Search code examples
javascriptvue.jsvue-componentvuejs3primevue

keep-alive on Vuejs (PrimeVue) Sidebar component doesn't work

I have a PrimeVue Sidebar component working as below and am passing in a dynamic component to it. (For now its a single components, just to get this up and running).

<Sidebar v-model:visible="sidebarState" :baseZIndex="1000" style="width:600px;">
      <component :is="this.sidebarComponent"></component>
</Sidebar>

The component displays great, and it contains a few text-input fields, that when the sidebar closes, I would like to retain their values. i.e. a user types in some data, closes the sidebar and then re-opens and the typed content is still there for them to carry on.

I have tried wrapping the component in a but it doesn't seem to work, like below.

<Sidebar v-model:visible="sidebarState" :baseZIndex="1000" style="width:600px;">
    <keep-alive>
            <component :is="this.sidebarComponent"></component>
        </keep-alive>
</Sidebar>

I just can't seem to get this working - Any help would be greatly appreciated!

Running Vue3, with PrimeVue 3 using Vite.

Thanks,

Solution

  • Looking through the Primevue Sidebar source, a v-if destroys the sidebar each time it's hidden. This happens because v-if conditionally adds and removes elements/components (v-show just hides things with CSS).

    <div :class="containerClass" v-if="visible">

    This isn't related to your dynamic component or <keep-alive>, and even a regular text input in the Sidebar slot would be lost in the same way.

    You should store the values of your form inputs in Vuex, or some global state, so that your component can pick up the values when it re-renders.