Vuejs（PrimeVue）侧边栏组件上的保持活动不起作用答案

【问题标题】：keep-alive on Vuejs (PrimeVue) Sidebar component doesn't workVuejs（PrimeVue）侧边栏组件上的保持活动不起作用
【发布时间】：2021-05-26 15:06:50
【问题描述】：

我有一个 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。

谢谢，

【问题讨论】：

标签： javascript vue.js vue-component vuejs3 primevue

【解决方案1】：

查看 Primevue 侧边栏 source，v-if 每次隐藏时都会破坏侧边栏。这是因为v-if 有条件地添加和删除元素/组件（v-show 只是用 CSS 隐藏东西）。

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

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

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

【讨论】：