v-if / v-else causes client side hydration to bail #4533

mediafreakch opened this Issue Dec 21, 2016 · 1 comment


None yet

2 participants


Vue.js version


Reproduction Link


Steps to reproduce

Follow the Readme in my sample repository.
Once you've built the app and have started the webserver, go to localhost:8080 and observe the output in the console.

What is Expected?

Client side hydration should work.

What is actually happening?

Client side hydration bails because there is a mismatch between the client-side rendered vnodes and the server-side rendered nodeList.

I found out that something must have gone wrong with indentation in the template compilation process or with the v-if / v-else directives.

Compare this App.vue template (hydration bails):

    <a v-if="false">Foo</a>
    <a v-else class="disabled">&lt; prev</a>

to this (hydration works):

    <a v-if="false">Foo</a>
    <a v-else class="disabled">&lt; prev</a><span>bar</span>
@defcc defcc added 2.x bug labels Dec 22, 2016
defcc commented Dec 22, 2016

Maybe we need to detect the whitespace text node and ignore it when hydrating.

@yyx990803 yyx990803 closed this in de220a6 Dec 23, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment