Open
Description
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.