Vue.js
tag in v-html

Question

I'm displaying content from ajax in a v-html element. The content contains a "pre" tag that i'd like to display as it should be.

Component :

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

Content example :

<h1>Title</h1>
<pre>
    <p>Hello</p>
</pre>

What I get :

Title

Hello

What i'd like to get :

<p>Hello</p>

Is there a way to achieve this ? Or is it impossible with v-html ?

EDIT :

I create the content from a form (wysiwyg). Before saving the content, it's encoded with he.js, so it looks like :

&lt;h1&gt;Title&lt;/h1&gt;
&lt;pre&gt;
&lt;p&gt;Hello&lt;/p&gt;
&lt;/pre&gt;

After getting it with my ajax function, I encode it with he.js to get :

<h1>Title</h1>
<pre>
    <p>Hello</p>
</pre>

XCS · Accepted Answer

Try with this content:

<h1>Title</h1>
<pre>
    &lt;p>Hello&lt;/p>
</pre>

So, you either have to escape the tags or separate the content of the pre tag from the rest of the HTML content.

I would personally do something like:

<div>
<h1>{{content.title}}</h1>
<pre>
    {{content.code}}
</pre>
</div>

And in your data you would have the content object:

content: {
 title: 'Title',
 code: '<p>Hello</p>'
}

But I do not know your exact use case and whether the HTML structure of your content can change or not.

Vue.js <pre> tag in v-html