时间戳

首页 > 解决方案 > Vuejs（PrimeVue）侧边栏组件上的保持活动不起作用

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

问题描述

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

谢谢，

标签： javascriptvue.jsvue-componentvuejs3primevue

解决方案

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

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

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

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

推荐阅读