Skip to content

domPropsInnerHTML incorrect markup #90

Closed
@alidcast

Description

@alidcast

I'm trying to render HTML using JSX.

For example:

  <div>
      <div domPropsInnerHTML={ this.body } />
 </div>

However I'm getting the following error:

The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

When I try the same exact HTML using the v-html directive in a vue template, the error disapears.

<div>
  <div v-html="body">
</div>

I would resort to using that, but I'm trying to use create a helper component for nuxtent that based on data renders a dynamic component or HTML at runtime, so that vue components could easily be used inside markdown.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions