laravel 为什么我不能看到我的 prop 从后端在我的nuxt页?

gr8qqesn  于 2022-12-19  发布在  其他
关注(0)|答案(1)|浏览(113)

我正在做一个索引页面,我必须从我的数据库客户数据中恢复数据,并将其插入到我的索引页面的表元素中。我已经设置了我的props,安装了从后端路由获取数据的axios函数,并在一个数据函数中返回客户数组。
我的索引.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字段列表,但当我搜索特定数据(例如{{customers.name}})时,它不会返回任何内容,甚至会返回错误。
显然我已经在nuxt.config中设置了我的laravel应用程序地址的baseurl

gudnpqoy

gudnpqoy1#

这里你把所有客户的数据以数组的形式带进来,如果数据存在于响应中,尝试使用一个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>

相关问题