CODEWITHSUNDEEP
javascripthtmlstringvue.js
Dan Hanly
Dan Hanly

Reputation: 7839

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?

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>

Upvotes: 11

Views: 38225

Answers (3)

noelboss
noelboss

Reputation: 484

You can use v-html to do this. As said in the docs:

<div class="description" v-html="property.description"></div>

Tripple {{{ does not work with vuejs 2.

Upvotes: 16

webnoob
webnoob

Reputation: 15934

Now we're using Vue2, this has changed slightly. According to the docs we need to make use of the v-html directive.

As an example, I've made a loading button like so:

<button type="submit" v-html="loading ? loadingText : 'Login'">

where the variables represent:

data: function (router) {
  return {
    loading: false,
    loadingText: '<i class="fa fa-spinner fa-spin"></i> Loading...',
  }
}

This would produce:

enter image description here

and when the loading state is changed to true

enter image description here

Upvotes: 24

Blue
Blue

Reputation: 22921

NOTE: This answer was intended for vue.js v1. For v2, please see webnoob's answer here.

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.

Upvotes: 7

Related Questions