英文:
How to use vue3 suspense with dynamically loaded components inside <keep-alive />?
问题
我正在尝试使用Suspense组件来显示我的应用中动态组件的加载状态。但是在这里，我遇到了keep-alive和Suspense都需要在单个根节点上的情况。
然而，在下面的代码中，即使在Suspense内部只有一个根节点，它仍然会给我报错。[Vue warn]: <Suspense> slots expect a single root node.
我正在按照Vue文档中所说的方式进行操作。我是否漏掉了什么？我正在使用Nuxt 3.2.3。
英文:
I am trying to use Suspense component to show the loading state of dynamic components in my app. But here I come across the scenario where both keep-alive and Suspense require on single root node.
<keep-alive>
<Suspense>
<component
ref="stepForm"
:id="currentTabComponent.id"
:key="currentTabComponent.id"
:is="currentTabComponent.value"
@success="handleSuccess"
></component>
<template #fallback>
Loading...
<img src="@/assets/images/auth-decoration.png" />
</template>
</Suspense>
</keep-alive>
However in the below code even if have only one root node inside of Suspense. It gives me this error.
[Vue warn]: <Suspense> slots expect a single root node.
I am doing exactly as said in the vue docs.
Is there any thing that I am missing? I am using Nuxt 3.2.3
答案1
得分: 0
I found the issue. I was stupid not enough to figure out I was using two html elements node inside of <template #fallback>. Updated my code and boom the suspense works like charm.
// Only one root node here
英文:
I found the issue. I was stupid not enough to figure out I was using two html elements node inside of <template #fallback>. Updated my code and boom the suspense works like charm.
<keep-alive>
<Suspense>
<component
ref="stepForm"
:id="currentTabComponent.id"
:key="currentTabComponent.id"
:is="currentTabComponent.value"
@success="handleSuccess"
></component>
<template #fallback>
// Only one root node here
<img src="@/assets/images/auth-decoration.png" />
</template>
</Suspense>
</keep-alive>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论