Keep list components alive in Vue

4
votes

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
vue.jsvue-component
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 - Marek Urbanowicz
@MU Yes, I need to prevent re-rendering. What do you mean by losing observation on components? - Mikko
What exactly is your problem, is it: this renders only the first component ? - Saurabh
@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

4 Answers

5
votes
 <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

2
votes

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.

2
votes

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://vuejs.org/v2/api/#keep-alive

Try v-once directive instead.

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

2
votes

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.