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

svdrlsy4  于 2023-10-23  发布在  Vue.js
关注(0)|答案(3)|浏览(224)

我使用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组件

o2gm4chl

o2gm4chl1#

我仍然建议使用<component />标记并解决这个bug。但是如果这不起作用,你可以像这样使用v-if => <custom-poll v-if="condition" id="9"></custom-poll>,然后在下一行=> <poll v-else id="9"></poll>

epggiuax

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

vue: {
    runtimeCompiler: true,
  },

这是docs。

8mmmxcuj

8mmmxcuj3#

您可以使用cheerio创建DOM并在服务器端更改它。安装后,您应该导入import cheerio from 'cheerio'。然后你可以使用这个功能。

function replaceEl(el) {
    const $ = cheerio.load(el);
    $('custom-poll').each((index, poll) => {
        const $customPoll = $(poll);
        const id = $customPoll.attr('id'); // get props of <custom-poll /> (id)

        const newEl = $('<Poll>'); // create new element
        newEl.attr('id', id); // add props

        $customPoll.replaceWith(newEl); // replace
    });

    // Get and return the modified HTML content
    const modifiedHtmlContent = $.html($('div'));
    return modifiedHtmlContent;
}

相关问题