為什么在我的 nuxt 頁面中看不到后端的道具？

Question

我正在制作一個索引頁面，我必須從我的數據庫客戶數據中恢復並將其插入到我的索引頁面的表元素中。 我已經設置了我的道具，使用 axios 的安裝函數從后端路由獲取數據，並在數據函數中返回客戶數組，

我的 index.vue 頁面：

<template>
  <div>
     <table v-if="customers">
  <tr>
    <th>name</th>
    <th>address</th>
  </tr>
  <tr>
    <td>{{ customers.name }}</td>
    <td>{{ customers.address }}</td>
  </tr>
</table>
  </div>
</template>

<script>
import Table from "../components/Table.vue";
export default {
  components: { Table },
  name: "IndexPage",
  data() {
    return {
      customers: [],
    };
  },
  props: {
    customer: {
      required: true,
      type: Object,
    },
  },
  async mounted() {
    const response = await this.$axios.$get("/api/customers");
    this.customers = response.data;
  },
};
</script>

如果我寫 {{ customers }} 該函數返回客戶字段列表，但是當我搜索特定數據（例如 {{ customers.name }}）時，它不會返回任何內容，甚至是錯誤。

顯然我已經在 nuxt.config 中使用我的 laravel 應用程序的地址設置了 baseurl

Answer 1

在這里，您將所有客戶的數據以數組的形式帶入，如果數據存在於響應中，請嘗試使用 v-for 循環遍歷客戶數組並顯示每個客戶的數據。 這看起來像這樣：

<template>
  <div>
     <table v-if="customers.length">
       <tr>
         <th>name</th>
         <th>address</th>
       </tr>
       <tr v-for="customer in customers" :key="customer.id">
         <td>{{ customer.name }}</td>
         <td>{{ customer.address }}</td>
       </tr>
     </table>
  </div>
</template>