search

vuejs / vue

This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core
http://v2.vuejs.org
MIT License
207.7k stars 33.67k forks source link

2 transition-groups with different tags v-if / v-else = Cannot read property '$vnode' of null #8737

Open Mboulianne opened 6 years ago

Mboulianne commented 6 years ago

Version

2.5.16

Reproduction link

https://codepen.io/anon/pen/BOpJZb

Steps to reproduce

1- Open the console 2- Click the button

What is expected?

In fact I don't know. I would expect not to see the error but I'm thinking maybe I'm doing something wrong.

What is actually happening?

Cannot read property '$vnode' of null appears in the console

Mboulianne commented 6 years ago

Note: I've dug into the issue. If I use v-shows instead of v-if / else it works. If all my transition-group have the same tag it works, even with v-if-else. However, this is not practical in my case. If there are no components in transition-group children, it works.

Mboulianne commented 6 years ago

I've also thought of nesting my transition-groups in 2 divs that I'd apply the v-if/else on and I get the same error I've added the code in my codePen

posva commented 6 years ago

You can add a key attribute to the transition-group as well to remove the error but the error shouldn't appear indeed

Mboulianne commented 6 years ago

@posva thank you for the workaround =D