javascript - NuxtJS/Vue3：使用异步 API 数据的 V-for 工作不正常（TS）

我目前正在使用 TypeScript 一起开发一个 Vue 3 项目。

我有一个 API，它会向我发送一个包含每个服务器详细信息的对象数组。

我在 /server/api/serverData.ts 下有一个脚本文件，它为我获取这些数据

//we want to fetch asnyc
export default defineEventHandler(async (event) => {
  //fetch from uri using $fetch from nuxt
  const data = await $fetch("https://game.aq3d.com/api/game/ServerList");
  //return data
  return data;
});

这是一个示例输出

[
  {
    "ID": 1,
    "SortIndex": 1,
    "Name": "Red Dragon",
    "HostName": "nextdragon.aq3d.com",
    "Port": 5594,
    "UserCount": 754,
    "MaxUsers": 900,
    "State": true,
    "Chat": true,
    "Language": "en",
    "IP": "",
    "LocalIP": "",
    "LastUpdated": "2022-12-30T15:22:00",
    "Connections": 737,
    "GEMQueueLength": 2484,
    "AlertLevel": 1,
    "Status": 1,
    "Region": "NA"
  },
  {
    "ID": 4,
    "SortIndex": 16,
    "Name": "Localhost",
    "HostName": "localhost",
    "Port": 5591,
    "MaxUsers": 900,
    "State": true,
    "Chat": true,
    "Language": "en",
    "IP": "",
    "LocalIP": "",
    "LastUpdated": "2022-07-01T15:48:00",
    "AccessLevel": 100,
    "AlertLevel": -1,
    "Status": 0,
    "Region": "NA"
  },
  {
    "ID": 7,
    "SortIndex": 4,
    "Name": "Blue Dragon",
    "HostName": "game.dragon.aq3d.com",
    "Port": 5594,
    "UserCount": 180,
    "MaxUsers": 900,
    "State": true,
    "Chat": true,
    "Language": "en",
    "IP": "",
    "LocalIP": "",
    "LastUpdated": "2022-12-30T15:22:00",
    "Connections": 178,
    "AlertLevel": 1,
    "Status": 1,
    "Region": "NA"
  },
  {
    "ID": 10,
    "SortIndex": 7,
    "Name": "Black Dragon",
    "HostName": "game.dragon.aq3d.com",
    "Port": 5593,
    "UserCount": 1,
    "MaxUsers": 900,
    "State": true,
    "Chat": true,
    "Language": "en",
    "IP": "",
    "LocalIP": "",
    "LastUpdated": "2022-12-30T15:22:00",
    "AccessLevel": 100,
    "Connections": 1,
    "AlertLevel": 1,
    "Status": 1,
    "Region": "NA"
  },
  {
    "ID": 11,
    "SortIndex": 8,
    "Name": "Green Dragon  [EU]",
    "HostName": "nextdragon.aq3d.com",
    "Port": 5590,
    "UserCount": 128,
    "MaxUsers": 900,
    "State": true,
    "Chat": true,
    "Language": "en",
    "IP": "",
    "LocalIP": "",
    "LastUpdated": "2022-12-30T15:22:00",
    "Connections": 123,
    "AlertLevel": 1,
    "Status": 1,
    "Region": "EU"
  },
  {
    "ID": 12,
    "SortIndex": 9,
    "Name": "Gold Dragon [SEA]",
    "HostName": "nextdragon.aq3d.com",
    "Port": 5591,
    "UserCount": 57,
    "MaxUsers": 900,
    "State": true,
    "Chat": true,
    "Language": "en",
    "IP": "",
    "LocalIP": "",
    "LastUpdated": "2022-12-30T15:22:00",
    "Connections": 55,
    "AlertLevel": 1,
    "Status": 1,
    "Region": "AS"
  }
]

我在 /Player/Info.vue 下有一个 Player Info 组件，并带有属性

<script setup lang="ts">
interface PlayerProps {
    serverName: string;
    playerAmount: number;
    // maxPlayer: number;
    // connections: number;
}

const props = defineProps<PlayerProps>();


</script>
<template>
    <div>
        <h1>Player Information</h1>
        <h2>{{ serverName }}</h2>
        <h2>{{ playerAmount }}</h2>
    </div>
</template>

我在根目录下的 app.vue 内这样使用它：

<script setup lang="ts">
const servers = ref<any>([]);
const apiData = await useFetch('/api/serverData')


//assign apiData to apiRef
servers.value = apiData
console.log(servers.value)


</script>
<template>
  <div>
    <h1>AQ3D Server Status Infos</h1>
    <PlayerInfo  v-for="(server, index) in servers" :serverName="Name" :playerAmount="UserCount" />
  </div>
</template>

正如你所看到的，它没有显示我收到的 JSON 数据。我尝试过以不同的方式使用 v-for，但这只给我带来了错误。

我错过了什么——我用 ref 的方法是否还适用？我基本上只是想像这样遍历数组中每个服务器对象的组件

服务器名称 玩家数量

服务器名称 玩家数量

...