SSR fails to render component inside v-else of a v-if with v-html

[tuomassalo]

Version

2.6.11

Reproduction link

https://github.com/tuomassalo/vue-ssr-v-html-bug

Steps to reproduce

• clone the repo
• run npm run dev
• open localhost:8080
• observe Console log.

What is expected?

I expect SSR to render "bar: Bar!", as the client-side does.

Or, I'd like to get an eslint warning that this is a bad idea (if that is the problem).

What is actually happening?

App.vue fails to render bar-component on the server. Instead, it outputs <bar-component></bar-component>, and the dev server gives the warning "The client-side rendered virtual DOM tree is not matching server-rendered content."

---

The key part of App.vue is this:

<div v-if="foo" v-html="'Foo.'"/>
<div v-else>
  bar: <bar-component/>
</div>

My original component was naturally longer. I ran into this problem after changing the v-if line from something like:

<div v-if="foo">{{ foo }}</div>

To:

<div v-if="foo" v-html="foo"/>

... which seemed innocuous to me.

Finally, apologies for posting a very possible duplicate.