Vue: Rendering problems with v-if in vue-2.0-beta.1

[cemelo]

Vue.js version

2.0.0-beta.1

Reproduction Link

https://jsfiddle.net/ybh4w2sx/

Steps to reproduce

• Given some DOM element and a variable x, create an element with a v-if directive bound to the variable x and, optionally, a transition set.
• Toggle the variable a few times.
  

  What is Expected?

The DOM element should be removed and attached several times to the parent. If the transition is set, it should be applied also.

What is actually happening?

The behaviour is erratic. Sometimes the element is rendered correctly, but eventually the next sibling is attached instead. Also, if a transition is set, it isn't applied at all.

[cemelo]

@yyx990803 now, (1) when you show the item while transitioning, a duplicated element is added to the DOM, as seen in https://jsfiddle.net/ybh4w2sx/8/. Also, (2) if you have two elements with the v-if directive, the vm inserts the wrong element. The fiddle was updated to better enlighten you about the bug.

Edit: (1) only happens when the element is leaving the DOM.

[yyx990803]

@cemelo thanks for the update. I think the 2.0 transition system needs to be revised to deal with vdom updates like this - stay tuned for beta.2.