Rendering unescaped HTML content in Vue.js
P粉253518620
P粉253518620 2023-08-21 19:48:52
0
2
592
<p>How to parse HTML code in mustache binding? Currently newline characters (<code><br /></code>) will only be displayed/escaped. </p> <p>Small Vue application:</p> <pre class="brush:php;toolbar:false;">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 } ] } })</pre> <p>The following is the template: </p> <pre class="brush:php;toolbar:false;"><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></pre></p>
P粉253518620
P粉253518620

reply all(2)
P粉939473759

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.

P粉399090746

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

<td v-html="desc"></td>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template