v-html doesn't output HTML properly

Question

I make use of an API that consists of a JSON with prefetched data from a CMS. The partial JSON looks like this:

"content": "<p><em>We're looking for a pro-active, analytical, commercially minded and ambitious deal-closer who loves to work - and play - hard to join our Company.

I then pass this data to a child component and then render it by using v-html. I expected this to output the HTML tags with styling and semantics. However, it renders the HTML tags as plain text:

<p><em/>We're looking for a pro-active, analytical, commercially minded and ambitious deal-closer who loves to work - and play - hard to join our Company.

Does anyone know what I am doing wrong? Should I have parsed the JSON? Should I have decoded the raw JSON to HTML tags first?

Mitya · Accepted Answer · 2019-12-15 16:30:20Z

1

Nothing to do with JSON; everything to do with your web service unhelpfully giving you unparsed HTML.

You're going to have to decode these HTML entities yourself.

One common trick is to feed the unparsed HTML to an off-DOM element, then read it back via textContent, which will give you the parsed version.

let p = document.createElement('p');
p.innerHTML ='&lt;p&gt;'
console.log(p.textContent); //"<p>"

edited Dec 15, 2019 at 16:30

answered Dec 15, 2019 at 15:26

Mitya

34.8k15 gold badges70 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

skydeveloper Over a year ago

It works, hoorray! Thank you so much; I had been stuck on this issue for a few days. Just out of curiousity: any idea why your trick seems to work?

Mitya Over a year ago

Well it comes down to the difference between an element's HTML content and its textual content. Textual means parsed - the result of the HTML. Hence it works.

Collectives™ on Stack Overflow

v-html doesn't output HTML properly

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related