Skip to content

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

Open
@tuomassalo

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions