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 ?

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 ?

• javascript
• vue.js
• vuejs2

Share Improve this question Follow edited May 23, 2022 at 8:15 Nikola Pavicevic 23.5k99 gold badges2929 silver badges5151 bronze badges asked Oct 8, 2021 at 13:41 NewProgrammerNewProgrammer 45255 silver badges1919 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Try to use v-html directive :

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