使用vue.js渲染API调用中的转义HTML

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 .