Vue.js Riddle - 从字符串HTML追加组件

Question

我有以下问题 - 想象一下网络博客文章，它有文字段落和图库中的几张文字照片。

我在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()指令输出

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

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

到目前为止我没有运气，首先我尝试将其输出为简单的RAW html，但很快就意识到指令不起作用。关于如何用跨度完全相同的组件替换此字符串的任何想法？

谢谢！

Answer 1

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