VueJS Print HTML to Page

Question

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> 

Answer 1

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:

and when the loading state is changed to true

Answer 2

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.