在Vue3中呈现动态组件
在Vue3中呈现动态组件
提问于 2022-11-03 19:58:06
我试图根据API响应中的"__typename“来呈现组件：
{
"data": {
"home": {
"data": {
"attributes": {
"webcomponents": [
{
"__typename": "ComponentWebComponentsFooterWidget"
},
{
"__typename": "ComponentWebComponentsImage"
},
{
"__typename": "ComponentWebComponentsImageText",
"title": "test",
}
]
}
}
}
}
}但没有任何东西被渲染。这是我的vue3代码：
<script setup>
import { defineAsyncComponent, ref } from 'vue'
import { useHomeQuery } from '@/generated/operations'
const ComponentWebComponentsFooterWidget = defineAsyncComponent(() =>
import('../components/Hero1.vue'),
)
const ComponentWebComponentsImage = defineAsyncComponent(() =>
import('../components/Hero2.vue'),
)
const ComponentWebComponentsImageText = defineAsyncComponent(() =>
import('../components/Hero3.vue'),
)
const { result, loading: queryLoading, error } = useHomeQuery({})
</script>
<template>
<div v-for="item in result.home.data.attributes.webcomponents" :key="item.id">
<component :is="item.__typename" />
</div>
</template>我让它在vue2中像预期的那样工作，但是我对vue3还很陌生。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-11-03 20:25:30
在使用脚本设置的Vue 3中，<component :is />需要引用组件定义，而不是作为字符串的组件名称。
试试这个：
<script setup>
// ...
const componentMap = {
ComponentWebComponentsImage: defineAsyncComponent(() =>
import('../components/Hero1.vue'),
),
ComponentWebComponentsImage: defineAsyncComponent(() =>
import('../components/Hero2.vue'),
),
ComponentWebComponentsImageText = defineAsyncComponent(() =>
import('../components/Hero3.vue'),
)
}
</script>
<template>
<div v-for="item in result.home.data.attributes.webcomponents" :key="item.id">
<component :is="componentMap[item.__typename]" />
</div>
</template>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74308903
复制相关文章
相似问题
腾讯云开发者
