How can I manage to get HTML interpreted inside a mustache binding? At the moment the break (<br />) is just displayed/escaped.
Small Vue app:
var logapp = new Vue({
el: '#logapp',
data: {
title: 'Logs',
logs: [
{ status: true, type: 'Import', desc: 'Learn<br />JavaScript', date: '11.11.2015', id: 1 },
{ status: true, type: 'Import', desc: 'Learn<br />JavaScript', date: '11.11.2015', id: 1 }
]
}
})
And here is the template:
<div id="logapp">
<table>
<tbody>
<tr v-repeat="logs">
<td>{{fail}}</td>
<td>{{type}}</td>
<td>{{description}}</td>
<td>{{stamp}}</td>
<td>{{id}}</td>
</tr>
</tbody>
</table>
</div>
You can use the v-html directive to show it.
like this:
<td v-html="desc"></td>
Starting with Vue2, the triple braces were deprecated, you are to use v-html.
<div v-html="task.html_content"> </div>
It is unclear from the documentation link as to what we are supposed to place inside v-html, your variables goes inside v-html.
Also, v-html works only with <div> or <span> but not with <template>.
If you want to see this live in an app, click here.