VueJS Print HTML to Page

Question

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

When I try to print this on a page in my template, it actually prints HTML. Thus, the text contains HTML tags, and it is not interpreted by the browser as HTML.

How can i fix this?

Template:

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

Conclusion:

<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

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

According to docs :

, HTML. HTML .

3 :

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

Sidenote ( ):

HTML , XSS. HTML , .

Answer 2

Vue2, . docs v-html.

:

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

:

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

:

loading true

Answer 3

You can use v-html for this. As the docs say :

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

Triple {{{does not work with vuejs 2.