Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Display unescaped HTML in Vue.js

People also ask

How do I display Vue in HTML?

The simplest way to get started with Vue is to grab the development version script for it and add it to the head tag of your HTML file. Then you can start Vue code inside the HTML file inside of script tags. And have the Vue code connect up with an existing element on your HTML page.

What is V-HTML in Vue JS?

The v-html directive is a Vue. js directive used to update a element's inner HTML with our data. This is what separates it from v-text which means while v-text accepts string and treats it as a string it will accept string and render it into HTML.

What can I use instead of V in HTML?

Reintroduce Triple Curly Braces {{{ }}} as a v-html alternative #7431.

Does Vue sanitize HTML?

This is where vue-sanitize comes in. Not only will it allow you to use a whitelist of "safe" HTML tags, it will remove disallowed tags rather than escaping them. Using it is pretty simple and covered in the docs.


You can use the directive v-html 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.


You can read that here

If you use

{{<br />}}

it'll be escaped. If you want raw html, you gotta use

{{{<br />}}}

EDIT (Feb 5 2017): As @hitautodestruct points out, in vue 2 you should use v-html instead of triple curly braces.


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>

You have to use v-html directive for displaying html content inside a vue component

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