Vue renders unexpected "undefined" when v-if condition changes

[pvorb]

Vue renders the text node "undefined" as the first child of an element that appears through a changed v-if condition (same applies for v-show) if it replaces an element that uses v-html.

Vue.js version

2.0.2, 2.0.3 (no other versions tested)

Reproduction Link

http://jsfiddle.net/5sH6A/860/

Steps to reproduce

In the JSFiddle, click the text "click me!" and you'll see the unexpected text "undefined" before <p>[deleted]</p>.

Using a template like this one:

<div>
  <div v-if="comment.status !== 'DELETED'" class="platon-text" v-html="comment.text" v-on:click="remove"></div>
  <div v-else class="platon-text"><p>[deleted]</p></div>
</div>

When comment.status changes from 'PUBLIC' to 'DELETED', instead of only showing the v-else part of the template, an unexpected undefined is rendered.

What is Expected?

The nodes from the template

<div class="platon-text"><p>[deleted]</p></div>

should be rendered.

What is actually happening?

The nodes equivalent to

<div v-else class="platon-text">undefined<p>[deleted]</p></div>

are rendered.

[pvorb]

Using v-html on the first element seems to play an important role in this issue. It's sufficient to set v-html="''". Once you remove the directive though, everything is rendered just fine.

[defcc]

Seems to be a bug at first glance, thanks @pvorb for your reporting.