NuxtJS/Vue3+TS：异步API数据结合v-for无法正常渲染

1. 验证API接口是否返回预期数据 #

先确认/api/serverData是否正确返回服务器数组：

• 打开浏览器DevTools的「Network」标签，过滤Fetch/XHR请求，查看该接口的响应内容，确认是数组结构，且包含serverName和playerAmount字段（或对应需要转换的字段）。
• 在/server/api/serverData.ts中添加日志，确认第三方API的数据接收与处理是否正常：

  // /server/api/serverData.ts
  export default defineEventHandler(async () => {
    const thirdPartyData = await $fetch('第三方API地址')
    console.log('第三方API返回数据:', thirdPartyData) // 查看终端日志
    // 若字段不匹配，在这里转换格式
    const formattedData = thirdPartyData.map((item: any) => ({
      serverName: item.name, // 替换成第三方API实际的名称字段
      playerAmount: item.onlinePlayers, // 替换成实际的玩家数字段
      id: item.id // 用于v-for的唯一key
    }))
    console.log('处理后的数据:', formattedData)
    return formattedData
  })
  

2. 修正useFetch的使用方式 #

Nuxt的useFetch返回响应对象，直接赋值给ref会导致数据未正确绑定，正确写法有两种：

写法一：解构响应数据 #

<script setup lang="ts">
interface Server {
  id: string | number
  serverName: string
  playerAmount: number
}

// 直接解构data，自动转为ref
const { data: servers, error } = await useFetch<Server[]>('/api/serverData')
</script>

写法二：手动给ref赋值 #

<script setup lang="ts">
interface Server {
  id: string | number
  serverName: string
  playerAmount: number
}

const servers = ref<Server[]>([])
const { error } = await useFetch('/api/serverData', {
  onSuccess(data) {
    servers.value = data as Server[]
  }
})
</script>

3. 确认PlayerInfo组件的Props定义 #

确保组件正确接收并校验props：

<!-- PlayerInfo.vue -->
<script setup lang="ts">
interface Props {
  serverName: string
  playerAmount: number
}

// 定义props，TypeScript自动校验类型
const props = defineProps<Props>()
</script>

<template>
  <div class="server-item">
    <h3>{{ serverName }}</h3>
    <p>在线玩家: {{ playerAmount }}</p>
  </div>
</template>

4. 修正v-for渲染逻辑 #

• 必须给v-for元素添加唯一key，避免渲染异常；
• 处理数据未加载完成的状态，避免报错：

<!-- app.vue -->
<template>
  <div v-if="error" class="error">加载失败: {{ error.message }}</div>
  <!-- 数据加载中显示占位 -->
  <div v-else-if="!servers" class="loading">加载中...</div>
  <!-- 数据存在时渲染组件 -->
  <div v-else class="server-list">
    <PlayerInfo
      v-for="server in servers"
      :key="server.id" <!-- 用唯一标识当key，不要用index -->
      :server-name="server.serverName" <!-- 驼峰props在模板中用短横线写法 -->
      :player-amount="server.playerAmount"
    />
  </div>
</template>

常见错误排查点 #

• 字段名不匹配：第三方API返回的字段可能和你预期的serverName/playerAmount不一致，必须在serverData.ts中转换；
• v-for遍历非数组：如果接口返回的是对象而非数组，会导致渲染失败，需确认接口响应格式；
• Props拼写错误：模板中传参时，serverName要写成server-name，避免大小写不匹配。

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