When using v-html to display content retrieved via AJAX, I encountered an issue with the "pre" tag not rendering as expected.
Here is my component setup:
<div v-html="content"></div>
For example, the content includes:
<h1>Title</h1>
<pre>
<p>Hello</p>
</pre>
The current output is:
Title
Hello
But ideally, I would like it to be displayed as follows:
Title
<p>Hello</p>
I am unsure if this desired format can be achieved with v-html. Any suggestions or solutions?
EDIT :
The content is generated from a form (wysiwyg) and encoded with he.js before saving. The encoded version looks like this:
<h1>Title</h1>
<pre>
<p>Hello</p>
</pre>
After retrieval via AJAX, I decode it with he.js to get:
<h1>Title</h1>
<pre>
<p>Hello</p>
</pre>