我使用Nuxt.js v3.7.4(SSR模式),我有一个响应从API是一个所见即所得的编辑器这样的html字符串
<div>
<custom-poll id="9" />
</div>
我有一个组件Poll.vue,我想用它来替换<custom-poll id="9" />
到<Poll id="9" />
,我研究了一下,我试图使用<Component :is="{template:...}" />
,但它变得 Flink (它在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" />
替换为<Poll id="9" />
Poll.vue组件
3条答案
按热度按时间o2gm4chl1#
我仍然建议使用
<component />
标记并解决这个bug。但是如果这不起作用,你可以像这样使用v-if =><custom-poll v-if="condition" id="9"></custom-poll>
,然后在下一行=><poll v-else id="9"></poll>
epggiuax2#
让我们看看控制台中的警告:
[Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".
然后将此配置添加到
nuxt.config.ts
这是docs。
8mmmxcuj3#
您可以使用cheerio创建DOM并在服务器端更改它。安装后,您应该导入
import cheerio from 'cheerio'
。然后你可以使用这个功能。