Keep-alive not working with v-if and slot

Question

I want to keep certain part of my component alive when v-if="false"
The part I want to keep alive contains a slot, and it doesn't work.
The component within the slot is still mounted every time the v-if changes.
Is it possible to keep it alive in some way?

<div v-if="index === 1">
   <keep-alive >
      <div :key="tab.id">
         <slot></slot>
      </div>
   </keep-alive>
</div>

have you tried to move keep-alive one level upper, before the div with the v-if? — Fab

Steven Spungin Steven Spungin · Accepted Answer · 2019-11-10T13:06:31

Use v-show instead of v-if. It will be rendered once, and then hidden when the expression is false.

I have only used keep-alive with dynamic components.

Keep-alive not working with v-if and slot

1 Answers