Using pre rendered html as variable in html file with vueJS

Question

I currently have an issue regarding vueJS.

I have a server side application which renders my html and sends it back in a string.

I want to insert this html into my page to display it.

I have it set up like this currently:

Template:

<div class="section" v-model="html">
   {{ html.body }}
</div>

This outputs the html as a string opposed to rendering it to the page.

Any idea on how to solve this ?

Thanks.

tony19 · Accepted Answer · 2022-07-15 20:36:17Z

7

You can use the official v-html directive:

<div v-html="rawHtml"></div>

See the documentation for more information.

edited Jul 15, 2022 at 20:36

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 2, 2017 at 14:21

ssc-hrep3

16.3k8 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

duck Over a year ago

Ah, thanks, one more question tho : how would i get my variable ``` {{ html.body }} ``` inside the v-html directive ? i cannot bind it with v-bind as the example on their page explains.

ssc-hrep3 Over a year ago

HTML is not allowed between curly brackets. Have you tried using <div v-html="html.body">? I guess html.body is part of the data configuration?

Collectives™ on Stack Overflow

Using pre rendered html as variable in html file with vueJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related