Vue3+Nuxt中如何向子组件传递文章分类ID属性

问题根源 #

1. 子组件字段引用错误：父组件传递的分类ID来自Storyblok故事对象的article.categories，但子组件接收的article props是故事的content对象（父组件传的是article.content），content里并没有categories字段。你已经通过:id="article.categories"把ID传给子组件，但模板里没用到这个id props，反而错误地去article（content对象）里找categories。
2. 异步数据加载不规范：直接在<script setup>里await请求数据，在Nuxt 3中可能导致客户端刷新时数据加载时机异常，引发属性丢失。
3. 潜在类型不匹配：如果article.categories是数组类型，子组件props定义的id: String会导致类型转换失败，无法正确传递属性。

修复步骤 #

1. 修正子组件模板，使用接收的id props

修改ArticleCard.vue，把模板中所有article.categories替换为接收的id props，同时适配数组类型的ID：

<template v-editable="article">
    <div class="card small-12 small-limited">
        <NuxtLink :to="'/'+slug" class="card-cat" :data-id="Array.isArray(id) ? id.join(',') : id">
            <img :src="article.image.filename + '/m/400x0'" :alt="article.image.alt" class="card-img" />
            <div class="card-wrapper card-text" :id="Array.isArray(id) ? id.join(',') : id">
                <h2 class="body-semibold body-m ms-4">
                    {{ article.title }}
                </h2>
                <p class="body-text body-m ms-1"> by {{ article.author }}</p>
            </div>
        </NuxtLink>
    </div>
</template>

<script setup>
// 允许id为数组或字符串，适配Storyblok返回的结构
defineProps({ article: Object, slug: String, id: [String, Array] })
</script>

2. 规范父组件的异步数据加载

用Nuxt 3的useAsyncData包裹数据请求，确保服务器端和客户端都能正确加载数据，避免刷新后数据丢失：

<template>
    <section v-editable="blok" class="m-3 s-1">
        <div class="cards limited medium-limited small-limited" v-if="articles">
            <ArticleCard 
                v-for="article in articles" 
                :key="article.uuid" 
                :article="article.content"
                :slug="article.full_slug"
                :id="article.categories"/>
        </div>
        <div v-else>加载中...</div>
    </section>
</template>

<script setup>
defineProps({ blok: Object })

const storyblokApi = useStoryblokApi()
const { data: articles } = await useAsyncData('blog-articles', async () => {
    const { data } = await storyblokApi.get('cdn/stories', {
        version: useRoute().query._storyblok ? 'draft' : 'published',
        starts_with: 'blog',
        is_startpage: false,
    })
    return data.stories
})
</script>

3. 适配Storyblok关联字段结构（如果需要）

如果article.categories是关联类型的对象数组（比如包含uuid字段的分类对象），需要在父组件中提取ID字符串：

<!-- 父组件中修改传递的id属性 -->
:id="article.categories.map(cat => cat.uuid).join(',')"

此时子组件props可以改回id: String，因为已经转成逗号分隔的字符串。

额外检查 #

• 确认Storyblok的博客文章内容类型中，categories字段已正确关联分类内容类型，且发布版本中已填充数据。
• 查看浏览器控制台是否有类型错误，及时调整ID的格式转换逻辑。

内容的提问来源于stack exchange，提问作者sarbend