在 Vuejs (PrimeVue) 侧边栏组件上保持活动状态不起作用

Question

我有一个 PrimeVue 边栏组件，如下所示，我正在向它传递一个动态组件。（现在它是一个单一的组件，只是为了得到它运行）。

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

该组件显示效果很好，它包含一些文本输入字段，当侧边栏关闭时，我想保留它们的值。即用户输入一些数据，关闭侧边栏然后重新打开，输入的内容仍然在那里供他们继续使用。

我试过将组件包装在 a 中，但它似乎不起作用，如下所示。

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

我似乎无法正常工作 - 任何帮助将不胜感激！

运行 Vue3，PrimeVue 3 使用 Vite。

谢谢，

Answer 1

查看 Primevue 边栏 source，v-if 每次隐藏边栏时都会破坏它。发生这种情况是因为 v-if 有条件地添加和删除 elements/components（v-show 只是用 CSS 隐藏了东西）。

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

这与您的动态组件或 <keep-alive> 无关，甚至 Sidebar 插槽中的常规文本输入也会以同样的方式丢失。

您应该将表单输入的值存储在 Vuex 或某些全局状态中，以便您的组件可以在重新呈现时获取这些值。

在 Vuejs (PrimeVue) 侧边栏组件上保持活动状态不起作用

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

javascript

vue.js

vue-component

primevue

vuejs3