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>

Answer 1

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!