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 ?

Answer 1

Try to use v-html directive :

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