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

Closed
mediafreakch opened this Issue Dec 21, 2016 · 1 comment

Projects

None yet

2 participants

@mediafreakch

Vue.js version

2.1.6

Reproduction Link

https://github.com/mediafreakch/vue-hydration-bug

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>
    <span>bar</span>

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
Member
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