Nuxt.js useFetch()无法在浏览器展示数据求助

1. 先解决初始空值导致的渲染报错 #

useFetch 是异步钩子，页面初始化时 formattedJSON 为 null，直接访问 formattedJSON.featured 会触发 TypeError，导致页面渲染中断。你需要添加空值判断：

修改模板代码：

<template>
  <!-- 先判断数据是否存在，再渲染列表 -->
  <div v-if="formattedJSON">
    <q-card v-for="article in formattedJSON.featured" :key="article.id">
      <q-img :src="article.image" @load="imageLoaded" />
      <q-card-section>
        <NuxtLink
          :to="article.channel.url"
          class="text-channel text-caption q-mb-sm text-uppercase text-weight-bold"
          style="text-decoration: none"
        >{{ article.channel.name }}</NuxtLink>
        <p class="q-mb-sm text-header4">{{ article.title }}</p>
        <p class="q-mb-xl text-data">{{ article.blurb }}</p>
      </q-card-section>
    </q-card>
  </div>
  <!-- 加载状态提示 -->
  <div v-else>加载中...</div>
</template>

或者用可选链简化判断：

<q-card v-for="article in formattedJSON?.featured" :key="article?.id">

2. 验证接口请求是否正常 #

打开浏览器开发者工具的「网络」面板，查看 https://featured/get/ 请求：

• 如果是4xx/5xx状态码：确认接口地址是否正确，或者后端服务是否正常运行。
• 如果请求未发送：检查是否存在跨域限制，必要时配置Nuxt代理转发请求。

3. 确认接口返回数据结构 #

在代码中打印返回数据，验证结构是否符合预期：

<script setup>
const { data: formattedJSON } = await useFetch("https://featured/get/");
// 在控制台查看实际返回的JSON结构
console.log("接口返回数据：", formattedJSON.value);
</script>

确保返回的JSON确实包含 featured 数组，且数组内元素存在 id、image、channel、title、blurb 这些字段。

4. 利用请求状态做反馈 #

useFetch 还提供了 error 和 pending 状态，可以用来展示加载/错误提示：

<script setup>
const { data: formattedJSON, error, pending } = await useFetch("https://featured/get/");
</script>

<template>
  <div v-if="pending">加载中...</div>
  <div v-else-if="error">加载失败：{{ error.message }}</div>
  <div v-else-if="formattedJSON">
    <q-card v-for="article in formattedJSON.featured" :key="article.id">
      <!-- 卡片内容 -->
    </q-card>
  </div>
</template>

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