Afficher le HTML sans échappement dans Vue.js

Comment puis-je réussir à faire interpréter le HTML dans une reliure moustache? Au moment où le break ( <br />) est juste affiché / échappé.

Petite application Vue:

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

Et voici le modèle:

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

À partir de Vue2, les triples accolades sont obsolètes, vous devez les utiliser v-html.

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

Le lien de documentation ne permet pas de savoir ce que nous sommes censés placer à l'intérieur v-html, vos variables y vont v-html.

En outre, v-htmlfonctionne uniquement avec <div>ou <span>mais pas avec <template>.

Si vous souhaitez voir cela en direct dans une application, cliquez ici .

Vous pouvez utiliser la directive v-html pour l'afficher. comme ça:

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

Vous pouvez le lire ici

Si tu utilises

{{<br />}}

il sera échappé. Si vous voulez du HTML brut, vous devez utiliser

{{{<br />}}}

EDIT (5 février 2017): Comme le souligne @hitautodestruct, dans la vue 2, vous devez utiliser v-html au lieu de triples accolades.

Vue par défaut est livré avec la directive v-html pour l'afficher, vous le liez à l'élément lui-même plutôt que d'utiliser la liaison moustache normale pour les variables de chaîne.

Donc, pour votre exemple spécifique, vous auriez besoin de:

<div id="logapp">    
    <table>
        <tbody>
            <tr v-repeat="logs">
                <td v-html="fail"></td>
                <td v-html="type"></td>
                <td v-html="description"></td>
                <td v-html="stamp"></td>
                <td v-html="id"></td>
            </tr>
        </tbody>
    </table>
</div>

Vous devez utiliser la directive v-html pour afficher le contenu html dans un composant vue

<div v-html="html content data property"></div>