Transitioning between components fails when component's root node has v-if="false"

[jiangfengming]

Version

2.4.4

Reproduction link

https://jsfiddle.net/by4bfduo/

Steps to reproduce

Click radio "B".

What is expected?

Should switch to component "B".

What is actually happening?

Doesn't switch to "B".

---

In real scenario, when a user navigates to a new view, I want to load the remote data (in created hook) and set the root node's v-if to true to switch the component in. But when data hasn't been load for some reason, the dynamic component is stuck and can't go anywhere.

[LinusBorg]

I don't think we currently have defined how <transition> should act if there was no element provided to begin with, so I wouldn't classify this a a bug, but there's certainly room for improvement.

At the very least, the transition should be skipped and the component-b should be rendered.

For now, you can work around this by adding a wrapper div: https://jsfiddle.net/Linusborg/by4bfduo/1/

[jiangfengming]

But if I wrap a div, the transition won't take effect when data is loaded.

https://jsfiddle.net/80sksyv5/

[posva]

I'm pretty sure we had an error in the past if you tried to use v-if(without v-else) for the root node, (the same as using multiple root nodes)

[jiangfengming]

I found a very ugly solution: add an empty <div v-else></div>, in every router view component that needs to wait data.

https://jsfiddle.net/vckb4ok5/