Directus+Nuxt调用playgrounds集合遇404及无法显示问题求助

我在测试Nuxt+Directus项目时，基于官方入门教程修改代码适配自己的playgrounds集合，修改后的代码如下：

<template>
    {{ playgrounds }}
</template>

<script setup lang="ts">
const { getItems } = useDirectusItems();

interface Playground {
    id: number;
    name: string;
}

const playgrounds = await getItems<Playground>({
    collection: "playgrounds"
});
</script>

运行上述代码时出现404错误，删除getItems调用的代码后项目能正常运行，但playgrounds集合的数据依然无法显示，以下是具体排查方向：

一、Directus端配置检查 #

• 验证集合权限：确认playgrounds集合是否开启了公共读取权限，或者当前请求使用的用户角色拥有读取该集合的权限。
• 核对集合名称：确保代码中collection: "playgrounds"的名称和Directus后台创建的集合名称完全一致（注意大小写、特殊字符）。
• 检查服务状态：确认Directus服务正常运行，Nuxt项目的环境变量中DIRECTUS_URL指向正确的Directus实例地址。

二、Nuxt端代码与配置检查 #

• 确认模块配置：检查是否正确安装@directus/nuxt模块，且nuxt.config.ts中已配置好Directus的url、token等必要参数。
• 规范异步调用写法：在<script setup>中直接使用顶层await需确保项目支持，也可以将接口调用封装到异步函数中：

  const fetchPlaygrounds = async () => {
    return await getItems<Playground>({ collection: "playgrounds" });
  };
  const playgrounds = await fetchPlaygrounds();
  

• 添加错误捕获：通过控制台打印具体错误信息，定位问题根源：

  try {
    const playgrounds = await getItems<Playground>({ collection: "playgrounds" });
    console.log("获取的数据:", playgrounds);
  } catch (error) {
    console.error("请求失败详情:", error);
  }
  

三、数据显示问题排查 #

• 确认数据获取状态：重新正确调用接口后，通过控制台打印playgrounds变量，确认是否成功获取到数据。
• 检查模板渲染逻辑：确保模板中{{ playgrounds }}的变量名与脚本中定义的一致，若数据是数组，需用v-for遍历渲染才能正常展示内容。

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