Binding HTML to property (Vue.js)

Question

How can I bind HTML to a Vue component property?

In my PHP script I have:

$html = '<div>some text</div>';

$box = "<box_includes
html_text='$html'
></box_includes>";

In my vue template:

<template id="template_box_includes">
{{ html_text }}
</template>

But in my browser I see all the text, including the tags, It's being recognized as a text:

<div>some text</div>

tony19 · Accepted Answer · 2022-07-15 20:16:52Z

11

EDIT 2019:

Below answer is outdated as stated by @devman in the comments. Please use v-html instead:

<template v-html="html_text"></template>

Older Answer

In Vue JS, the use of the double braces are escaping HTML. You need to use three to avoid escaping html like so:

<template id="template_box_includes">
{{{ html_text }}}
</template>

You can learn more on this page of the documentation: http://vuejs.org/guide/syntax.html#Raw-HTML

I hope this helps!

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 9, 2016 at 13:29

Hammerbot

16.5k13 gold badges67 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ok, I've must have googled it wrongly. Thanks for the answers!

attention: this doesn't seem to work anymore. v-html works though