Rendering escaped HTML from api call with vue.js

Question

I'm trying to render out data returned from an api call with Vue.

One portion of the data is coming in the form of escaped html like so:

body: "<ul> ↵ <li>This is <strong>Test 
Text.</strong></li> ↵</ul>"

I have tried the v-html directive as follows:

      <div  v-for="(item, index) in filteredList"> 
         <div v-html="item.body"></div>
      </div>

It's rendering out but but with visible anchor tags, exactly as it looks below, ul, li, strong tags all visible in the browser

  <ul> <li>This is &nbsp;<strong>Test Text</strong></li> </ul>

I've tried a decoding function (which rendered it exactly the same as the v-html is), a sanitizing plug-in, looked over this post Vue template - convert HTML special characters (numberic) to symbols? and many others but I just can't seem to get it to render properly

Answer 1

You could try using the DOMParser .

 const doc = new DOMParser().parseFromString("<li>", "text/html"); const textContent = doc.documentElement.textContent; console.log(textContent); 

After running it through here you can then pass the results to v-html .