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

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

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

body: "&lt;ul&gt; ↵ &lt;li&gt;This is &lt;strong&gt;Test 
Text.&lt;/strong&gt;&lt;/li&gt; ↵&lt;/ul&gt;"

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

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

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

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

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

Vue защищает вас от самих себя. Отправка необработанного HTML через такой API — это плохо, и вам следует избегать этого. Правильный способ сделать это — отправить объект JSON, который позволит вам создать объект на стороне клиента.

— 17.01.2019 23:20

Я добавил решение ниже, но согласился с @EmettSpeer, что вам нужно быть осторожным, прежде чем реализовывать то, что HTML выдается из API.

— 17.01.2019 23:24

javascript html vue.js rendering

17.01.2019 23:02

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

825

Ответы 1

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

const doc = new DOMParser().parseFromString("&lt;li&gt;", "text/html");
const textContent = doc.documentElement.textContent;
console.info(textContent);

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

17.01.2019 23:20