Keep-Alive Doesn’t Work with Transition-Group

[pingshunhuangalex]

Version

2.3.4

Reproduction link

https://jsfiddle.net/kxemxsjy/1/

Steps to reproduce

The JsFiddle was created by a gentleman on Vue help forum, it's not a complete replicate of the problem, but it's a good starting point for my testing.

1. Put something random to be cached by keep-alive in the card component
2. Wrap keep-alive around card components directly (components won't rendered at all)
3. Wrap keep-alive around card components directly and key the keep-alive (components won't rendered at all)
4. Wrap keep-alive around transition-group (components rendered, but nothing gets cached)
5. Specify name using include doesn't help either

What is expected?

Rating status (in rating component) should be kept for all cards correspondingly

What is actually happening?

Nothing's kept or the card components just not rendered at all due to Vue needs all items to be keyed (Which doesn't quite make sense for keep-alive...)

I went ahead and keyed the keep-alive anyway, but still no luck

---

I've been stuck on this issue for long enough, I think it's probably time to reach out for some help...

I have a search interface which displays results as card (using v-for), it will be switched to a different view card-reveal when user click on it.

There is a component inside each card called UserRating from which I want the rating info to be kept when users switch to card-reveal. I thought it was an obvious keep-alive case where the documentation seems to be quite straight forward. However, no matter where I wrap the keep alive (with target name), it just doesn't work... Some help would be appreciated. Thanks.

##Partial DOM structure for card and card-reveal

<div class="results-area">
More code here...

  <keep-alive include="UserRating">
    <transition-group name="card" tag="div">
      <Card v-if="expansionReady"
          v-for="result in apiResults"
          :result="result"
          :key="result.id" />
    </transition-group>
  </keep-alive>

More code here...

  <transition name="slideIn" tag="div">
    <CardReveal v-if="expansionMode" :result="currentApiResult" />
  </transition>
</div>

##Here is what UserRating component look like:

<template>
  <div class="user-rating">
    <i class="material-icons results-rate-up"
        :class="{toggled: rateStatus > 0}"
        @click.stop="userRate('up')">thumb_up</i>
    <i class="material-icons results-rate-down"
        :class="{toggled: rateStatus < 0}"
        @click.stop="userRate('down')">thumb_down</i>
    <span class="accuracy-score tooltipped"
        data-position="top"
        data-delay="50"
        data-tooltip="Accuracy Score"
        v-text="accuracyScore"
        v-show="accuracyScore !== 0">
    </span>
  </div>
</template>

[yyx990803]

The fiddle isn't really reproducing the issue, so I can only give vague feedback.

<keep-alive> is designed for the case where it has one direct child component that is being toggled - it can't work if you have v-for inside it, nor does it work if you wrap it on the entire <transition-group> (unless you are toggling the transition group instead).

More importantly - I don't think it's a good idea using <keep-alive> for state preservation like this, especially with v-for and <transition-group> involved, both of which are inherently working with lists instead of a single toggled child. I recommend thinking from another angle - hoist the ratings state out into a shared state object or a vuex store so that it's unaffected by the components' lifecycles.

[kenfred]

I ran into this issue as well (and authored the fiddle).

The keep-alive documentation indicates you can wrap multiple elements which are conditionally rendered:

<!-- multiple conditional children -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>

It is reasonable to expect this same behavior would hold when the multiple children are declared with v-for instead of an explicit list.

I apologize if the fiddle is incomplete. The fiddle simply wraps a v-for in a keep-alive. To observe the issue, you need to inspect the DOM to see if the elements are staying around. Is there a more obviously way to show if keep-alive is working?

[posva]

The difference is that v-for can render multiple elements but the v-if/v-else only renders one

[kenfred]

@posva: Thanks for your insight. That is a good distinction to keep in mind. Both comp-a and comp-b are kept alive, but only one is rendered at a time, based on the predicate a > 1.

Perhaps the documentation could be improved to clarify "multiple conditional children" are only supported when rendered mutually-exclusively. Note, it is not uncommon to do mutually-exclusive rendering using v-for as well. For example, conditionally rendering (v-if/v-show) based on a "currentIndex". Granted, it would be difficult for Vue to know if v-for is being used in this mode.

From a usage/syntax sugar perspective, I'd love to be able to combine the convenience of v-for with the optimizations offered by <keep-alive>. As it's currently implemented, I must "unroll" the v-for and explicitly do each element, wrapped in <keep-alive>, which removes the incredible convenience of v-for and also makes it more difficult to maintain generic/reusable and dynamic components.

[posva]

instead of using v-for + v-if, use a computed property to filter the array
Improvements on docs are always welcome 🙂

[kenfred]

Great suggestion. Thanks for your help. I'll submit a doc PR. Thanks.