CODEWITHSUNDEEP
vue.jskeep-alive
Brice Chaponneau
Brice Chaponneau

Reputation: 602

vue.js keep-alive and event rendering

I have 1 master component and 2 childs. In the master i do :

  <keep-alive>
    <component :is="getChild" @onrender="childRender" />
  </keep-alive>

So I switch from child 1 to child 2 and keep state of each.

Problem : when we use keep-alive, the child component is not re-render and when i use onCreated or onMounted or onUpdated... nothing append and it's normal. So how catch a "render" event with keep-alive ?

I know i can use a bus or a store like Vuex to keep state... but i don't want it if possible.

Thanks.

Upvotes: 1

Views: 2829

Answers (1)

Andrew Vasylchuk
Andrew Vasylchuk

Reputation: 4779

In 2.2.0+ and above, activated and deactivated will fire for all nested components inside a tree.

Use activated lifecycle hook.

export default {
  activated() {
    this.$emit("activated");
  }
}

Vue.js Documentation link: https://v2.vuejs.org/v2/api/#keep-alive

Live demo, where you can play with <keep-alive>: https://codepen.io/3vilArthas/pen/BeZgbE

Upvotes: 5

Related Questions