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