Dan Hanly Dan Hanly - 8 months ago 95
HTML Question

VueJS Print HTML to Page

I have a property which contains a HTML string as one of its attributes.

When I try and print this to the page within my template, it actually prints the HTML. So the text contains HTML tags, and it itself is not interpreted as HTML by the browser.

How can I fix this?


<div class="description">
{{ property.description }}


<p>Suscipit est aut molestiae provident quis magnam.</p> <p>Nesciunt iure impedit sint iste.</p> <p>Aspernatur repudiandae laborum dolor harum magnam officiis ad nihil.</p> <p>Non deserunt rerum adipisci voluptates est eos et.</p>


According to the docs:

The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use triple mustaches.

Use 3 curly brackets to accomplish your task:

<div class="description">
    {{{ property.description }}}

Sidenote (Also from the docs):

Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS attacks. Only use HTML interpolation on trusted content and never on user-provided content.