How to show formatted html string using vue.js

Question

I have this problem, I created a html page to show some texts formatted using quill editor. I save every text created in a table using this format as example:

<p>Test<strong> format</strong></p>

To show the text in my front end, I'm using a v-for with vue.js, like this:

<div class="card" v-for="(wiki, index) in wikiList">
   <div class="mb-3">
       <div class="form-control" type="text" id="view-container-wiki" readonly>{{wiki.description}}</input>
   </div>
</div>

The problem is that my html is not formatting the text, its just showing it with tags:

How can I create a method to return the string formatted ? I tried using Jquery, but it didn't work.

Any suggestion ?

Nikola Pavicevic · Accepted Answer · 2021-10-08 13:45:23Z

7

Try to use v-html directive :

 <div class="form-control" 
      type="text" id="view-container-wiki" 
      readonly 
      v-html="wiki.description">
 </div>

answered Oct 8, 2021 at 13:45

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

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

3 Comments

Patfreeze Over a year ago

@NewProgrammer I suggest you to parse it before rendering to avoid script injection. Like remove tags <script>

NewProgrammer Over a year ago

Thank you for the suggestion. I will look it

Patfreeze Over a year ago

No problem, it seems there is no "native" function to do that. Maybe this will help stackoverflow.com/a/45262458/13604954

Collectives™ on Stack Overflow

How to show formatted html string using vue.js

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related