使用 vue.js 从 api 调用中渲染转义的 HTML答案

【问题标题】：Rendering escaped HTML from api call with vue.js使用 vue.js 从 api 调用中渲染转义的 HTML
【发布时间】：2019-06-12 04:25:10
【问题描述】：

我正在尝试使用 Vue 渲染从 api 调用返回的数据。

一部分数据以转义 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、强标签在浏览器中都可见

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

我尝试了一个解码功能（它的渲染与 v-html 完全相同），一个消毒插件，查看了这篇文章 Vue template - convert HTML special characters (numberic) to symbols? 和许多其他帖子，但我似乎无法理解它可以正确渲染

【问题讨论】：

Vue 正在保护您免受自己的伤害。通过这样的 API 传送原始 HTML 是不好的，你应该避免它。正确的做法是发送一个 JSON 对象，它允许您在客户端构建对象。
我在下面添加了一个解决方案，但同意@EmettSpeer 的观点，即在实现从 API 发出的 HTML 之前需要小心。

标签： javascript html vue.js rendering

【解决方案1】：

您可以尝试使用DOMParser。

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

在此处运行后，您可以将结果传递给v-html。

【讨论】：