Nuxt页面无法渲染后端客户数据及props相关问题求助

你的核心问题是没有遍历数组，customers是一个客户对象的数组集合，直接访问customers.name相当于访问数组本身的name属性（不存在），而非数组内每个客户对象的name字段。另外还有几处细节需要调整：

修正步骤 #

• 使用v-for遍历customers数组，渲染每一条客户数据
• 调整axios请求的赋值逻辑（$axios.$get会直接返回接口响应数据，无需额外取response.data，除非后端接口返回结构包含外层data字段）
• 优化数据存在性判断（空数组属于真值，用长度判断更准确）
• 移除未使用的customer props（若父组件未传递该值，会触发必填校验报错）

修正后的代码 #

<template>
  <div>
    <table v-if="customers.length > 0">
      <tr>
        <th>name</th>
        <th>address</th>
      </tr>
      <!-- 用v-for遍历数组，绑定唯一key提升渲染性能 -->
      <tr v-for="customer in customers" :key="customer.id">
        <td>{{ customer.name }}</td>
        <td>{{ customer.address }}</td>
      </tr>
    </table>
    <!-- 无数据时显示友好提示 -->
    <p v-else>暂无客户数据</p>
  </div>
</template>

<script>
// 移除未使用的Table组件导入，避免冗余
export default {
  name: "IndexPage",
  data() {
    return {
      customers: [],
    };
  },
  async mounted() {
    // 若后端接口返回直接是数组，直接赋值即可；若返回结构是{ data: [...] }，则改为this.customers = response.data
    const response = await this.$axios.$get("/api/customers");
    this.customers = response;
  },
};
</script>

额外说明 #

1. 请根据后端实际返回结构调整赋值逻辑，若接口返回格式为{ code: 200, data: [...] }，则保持this.customers = response.data
2. v-for必须绑定唯一key，推荐使用客户的ID字段，避免重复渲染问题
3. 若后续需要用到customer props，请确保父组件正确传递该值，否则移除该props定义

内容的提问来源于stack exchange，提问作者4ri37ix L