Rendering unescaped HTML content in Vue.js

Question

How to parse HTML code in mustache binding? Currently newline characters (
) will only be displayed/escaped.

Small Vue application:

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 }
    ]
  }
})

The following 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>

Answer 1

Starting from Vue2, the three curly braces are deprecated, you need to use v-html.

<div v-html="task.html_content"> </div>

It's not clear from the documentation link what we should put in v-html, your variables should be placed in v-html.

Also, v-html only works with <div> or <span>, not <template> .

If you want to see it live in the app, please click here.

Answer 2

You can use the v-html directive to display it. like this:

<td v-html="desc"></td>