如何将 html 字符串中的标签替换为 Nuxt.js 3 项目中的 Vue 3 组件？

Question

我正在使用 Nuxt.js v3.7.4（SSR 模式），我从 api 得到的响应是一个所见即所得编辑器的 html 字符串，如下所示

<div>
<custom-poll id="9"></custom-poll>
</div>

我有一个组件 Poll.vue，我想用它来将

<custom-poll id="9"></custom-poll>

替换为

<Poll id="9" />

，我研究并尝试使用

<Component :is="{template:...}" />

，但它变得闪烁（它会在 1 - 2 秒内显示）从 DOM 中消失）

这是我的问题的演示：https://stackblitz.com/edit/github-bygkhd?file=nuxt.config.ts,app.vue,pages%2Findex.vue,components%2FPoll.vue

我想将

<custom-poll id="9"></custom-poll>

替换为

<Poll id="9" />

Poll.vue 组件

Answer 1

我仍然建议使用

<component />

标签并解决该错误。但如果这不起作用 你总是可以像这样使用 v-if =>

<custom-poll v-if="condition" id="9"></custom-poll>

并在下一行=>

<poll v-else id="9"></poll>