Display unescaped HTML in Vue js

Question

How can I manage to get HTML interpreted inside a mustache binding  At the moment the break   lt br   gt   is just displayed escaped   Small Vue app   var logapp   new Vue     el    logapp     data        title   Logs       logs            status  true  type   Import   desc   Learn lt br   gt JavaScript   date   11 11 2015   id  1             status  true  type   Import   desc   Learn lt br   gt JavaScript   date   11 11 2015   id  1                   And here is the template    lt div id  logapp  gt           lt table gt           lt tbody gt               lt tr v-repeat  logs  gt                   lt td gt   fail   lt  td gt                   lt td gt   type   lt  td gt                   lt td gt   description   lt  td gt                   lt td gt   stamp   lt  td gt                   lt td gt   id   lt  td gt               lt  tr gt           lt  tbody gt       lt  table gt   lt  div gt

User · Answer

Vue by default ships with the v-html directive to show it, you bind it onto the element itself rather than using the normal moustache binding for string variables.

So for your specific example you would need:

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

User · Answer

You can read that here   If you use     lt br   gt      it ll be escaped  If you want raw html  you gotta use      lt br   gt       EDIT  Feb 5 2017   As  hitautodestruct points out  in vue 2 you should use v-html instead of triple curly braces

User · Answer

Before using v-html  you have to make sure that the element which you escape is sanitized in case you allow user input  otherwise you expose your app to xss vulnerabilities  More info here  https   vuejs org v2 guide security html I highly encourage you that instead of using v-html to use this npm package

User · Answer

Starting with Vue2  the triple braces were deprecated  you are to use v-html    lt div v-html  task html content  gt   lt  div gt   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  lt div gt  or  lt span gt  but not with  lt template gt    If you want to see this live in an app  click here

User · Answer

You can use the directive v-html to show it  like this    lt td v-html  desc  gt  lt  td gt

User · Answer

You have to use v-html directive for displaying html content inside a vue component   lt div v-html  html content data property  gt  lt  div gt

[javascript] Display unescaped HTML in Vue.js

Examples related to javascript

Examples related to html

Examples related to vue.js