Vue: Transition keep alive

Created on 9 Aug 2016 · 1Comment · Source: vuejs/vue

Vue.js version

2.0.0-beta7

Reproduction Link

https://jsfiddle.net/miljan/yfLprk1t/

Steps to reproduce

Open the console and change the current visible Tab with the buttons.

What is Expected?

That created event is triggered only once

What is actually happening?

Is trigerred each time the component is displayed.

Source

miljan-aleksic

👍1

Most helpful comment

This is an interesting use case because keep-alive as an attribute doesn't work well for multiple conditional nodes.

I've adjusted it to use a component-based API similar to <transition> (will be out in next release):

<tabs>
  <transition>
    <keep-alive>
      <tabs-item v-if="index === 0" key="tab-1">Tab 1</tabs-item>
      <tabs-item v-if="index === 1" key="tab-2">Tab 2</tabs-item>
      <tabs-item v-if="index === 2" key="tab-3">Tab 3</tabs-item>
    <keep-alive>
  </transition>
</tabs>

yyx990803 on 9 Aug 2016

👍4

>All comments

This is an interesting use case because keep-alive as an attribute doesn't work well for multiple conditional nodes.

I've adjusted it to use a component-based API similar to <transition> (will be out in next release):

<tabs>
  <transition>
    <keep-alive>
      <tabs-item v-if="index === 0" key="tab-1">Tab 1</tabs-item>
      <tabs-item v-if="index === 1" key="tab-2">Tab 2</tabs-item>
      <tabs-item v-if="index === 2" key="tab-3">Tab 3</tabs-item>
    <keep-alive>
  </transition>
</tabs>

yyx990803 on 9 Aug 2016

👍4

Was this page helpful?

0 / 5 - 0 ratings