Рендеринг экранированного HTML из вызова API с vue.js

Question

Я пытаюсь отобразить данные, возвращенные из вызова API с помощью Vue.

Одна часть данных поступает в виде экранированного html, например:

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

Я пробовал директиву v-html следующим образом:

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

Это рендеринг, но с видимыми якорными тегами, точно так же, как это выглядит ниже, ul, li, сильные теги, все видимые в браузере

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

Я попробовал функцию декодирования (которая отображала его точно так же, как v-html), плагин очистки, просмотрел этот пост Шаблон Vue - преобразование специальных символов HTML (числовых) в символы ? и многие другие, но я просто не могу заставить его правильно визуализироваться

Answer 1

Вы можете попробовать использовать DOMParser.

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

После этого вы можете передать результаты в v-html.