4

I have a list of components that I render using v-for. Not all the components are shown simultaneously. I page the the array of rendered components by using slice.

These components shouldn't be rerendered, as some of them have user inputted data and some of them do network related tasks.

I tried to use <keep-alive>. However, this renders only the first component.

<keep-alive>
    <component :is="component.type" :key="component.id" v-for="component in components">
</keep-alive>

How do I keep a dynamic list of components alive?

4
  • by alive you mean to prevent re-render? Maybe by loosing observation on components? It is easy to do this way. Let me know if it could work for you Feb 9, 2017 at 8:40
  • @MU Yes, I need to prevent re-rendering. What do you mean by losing observation on components?
    – Mikko
    Feb 9, 2017 at 8:48
  • What exactly is your problem, is it: this renders only the first component ?
    – Saurabh
    Feb 9, 2017 at 9:10
  • @Saurabh Yes. Even though there are multiple items in the components array, only the first one is shown. It correctly retains its data, though, so it's not re-rendered.
    – Mikko
    Feb 9, 2017 at 9:38

4 Answers 4

6
 <div v-for="comp in compList"  :key="'container'+comp.keyId" >
    <keep-alive>
      <component :is="comp.type" :key="comp.keyId"></component>
    </keep-alive>
 </div>

this above works for me . Pushing elements to compList correctly creates new instances of their respective components. Moving an element's index within the array , maintaining key, does not call destroy/create and maintains state within each component

1
  • This works in Vue 3.
    – Mahmoud
    Oct 17, 2022 at 20:21
2

Tested the answer above in a fiddle and doesn't work. https://jsfiddle.net/z11fe07p/680/

 <div v-for="component in myComponents"  :key="component.id" >
    <keep-alive>
      <component :is="component.type" 
               :name="component.name">
      </component>
    </keep-alive>
 </div>

Also i would avoid using vue reserved words such as components because there is a components key in the vue instance which tells what components the instance is using.

1
  • This is something I tried earlier but also noted it didn't work either.
    – Mikko
    Feb 9, 2017 at 10:10
2

I read source code of Vue's <keep-alive>, and I created new Component which works very well with list.

package name is vue-keep-alive-global. Here is a link, https://www.npmjs.com/package/vue-keep-alive-global

How to use :

<KeepAliveGlobal>
    <YourComponent
        :key="uniqueKey"
    />
</KeepAliveGlobal>

With Array,

<template v-for="(item, index) of array">
    <KeepAliveGlobal :key="`blah-blah-${index}`">
        <YourComponent
            :item="item"
            :key="`your-component-${index}`"
        />
    </KeepAliveGlobal>
</template>

KeepAliveGlobal will cache component by key.

0
2

There's note at Vue docs about your use case

Note, <keep-alive> is designed for the case where it has one direct child component that is being toggled. It does not work if you have v-for inside it. When there are multiple conditional children, as above, ` requires that only one child is rendered at a time.

https://v2.vuejs.org/v2/api/#keep-alive

Try v-once directive instead.

https://v2.vuejs.org/v2/api/#v-once

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.