如何使用v-for遍历从Strapi GraphQL获取的嵌套对象？

你的问题出在没正确定位GraphQL返回的嵌套数组层级，直接遍历data只能拿到整个响应对象，而非需要的照片数据数组。结合你提供的数据结构，调整模板里的v-for路径就能解决：

修改后的模板代码 #

<template>
  <div>
    <!-- 遍历照片列表数组 -->
    <div v-for="photo in data.fotografies.data" :key="photo.id">
      <!-- 访问照片的基础属性 -->
      <h3>{{ photo.attributes.Titolo }}</h3>
      <p>Slug: {{ photo.attributes.slug }}</p>
      
      <!-- 遍历当前照片的关联图片数组 -->
      <div v-for="image in photo.attributes.immagini.data" :key="image.id">
        <img :src="image.attributes.url" :alt="photo.attributes.Titolo">
      </div>
    </div>
  </div>
</template>

<script setup>
const query = gql`query foto {
  fotografies {
    data {
      id
      attributes {
        Titolo
        slug
        immagini {
          data {
            attributes {
              url
            }
          }
        }
      }
    }
  }
}`
const { data } = await useAsyncQuery(query)
</script>

关键层级说明 #

• 最外层要遍历的照片集合：data.fotografies.data，这是Strapi GraphQL返回集合数据的标准结构
• 单张照片的属性都存于photo.attributes下，比如标题Titolo、路径标识slug
• 照片关联的图片数组在photo.attributes.immagini.data中，每张图片的地址是image.attributes.url

这样就能正确遍历嵌套对象，访问到每个元素的具体属性。

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