Блог

У меня есть компонент боковой панели 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.

Спасибо,

Просматривая исходный код боковой панели Primevue, a v-if уничтожает боковую панель каждый раз, когда она скрыта. Это происходит потому v-if , что условно добавляет и удаляет элементы / компоненты ( v-show просто скрывает вещи с помощью CSS).

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

Это не связано с вашим динамическим компонентом или <keep-alive> , и даже обычный ввод текста в Sidebar слот будет потерян таким же образом.

Вы должны хранить значения ваших входных данных формы в Vuex или в каком-либо глобальном состоянии, чтобы ваш компонент мог получать значения при повторном рендеринге.