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 侧边栏源，每次隐藏时， v-if都会破坏侧边栏。 发生这种情况是因为v-if有条件地添加和删除元素/组件（ v-show只是用 CSS 隐藏东西）。

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

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

您应该将表单输入的值存储在 Vuex 或一些全局 state 中，以便您的组件在重新渲染时可以获取这些值。