Vue.js 谜语 - 从字符串 HTML 附加组件答案

【问题标题】：Vue.js Riddle - Append component from string HTMLVue.js 谜语 - 从字符串 HTML 附加组件
【发布时间】：2017-10-09 11:52:27
【问题描述】：

我有以下问题 - 想象一篇网络博客文章，它有几段文字和来自图库的少量文字照片。

我正在获取 HTML 字符串数组中的文本。

例如：

{
 0 : '<p> text text text'<p>,
 1 : '<p> text text text </p>',
 2 : '<span class="embed" data-id="111"></span>',
 3 : '<p> text text text </p>,
}

我通过 v-html 指令输出 html 后加入 .join()

我需要做的是在输出 HTML 之前以某种方式替换 SPAN，然后使用用于嵌入照片的 vue.js 组件，例如：

<EmbedPhoto :id="data-id" @click="toggleGallery()"></EmbedPhoto>

到目前为止，我没有运气，首先我尝试将其输出为简单的 RAW html，但很快意识到指令不起作用。关于如何用 span 所在位置的组件替换此字符串有什么想法吗？

谢谢！

【问题讨论】：

是否可以让端点返回数字“111”而不是跨度标记？我在想如果你能做到这一点，那么在你的组件中你可以有一个 v-if 关闭值的类型，如果它是一个字符串，则执行 v-html 逻辑，否则如果它是数字，则组成元素。

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

我最终用includes()检测了一个字符串中是否包含“kcode”，这是每个嵌入的span都有的类，然后通过jquery parseHtml将字符串转换为dom节点，通过.dataset读取数据属性并在初始数组中的字符串位置创建一个带有类型键的对象，然后只需使用 v-for 和 v-if，如果它的 type="embed" im 使用 vue 组件，如果它是文本字符串 im只是用 v-html 输出。

【讨论】：