current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.3 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

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?

Template:

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

Output:

<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>
share|improve this question
up vote 4 down vote accepted

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 }}}
</div>

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.

share|improve this answer
    
Excellent, thank you. Yeah the content is inputted and validated before it enters the database, then is pulled through a Markdown parser on the backend. It's parsed and constructed before it arrives within Vue :) – Dan Hanly Jul 31 at 19:56

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.