我正在做一个索引页面,我必须从我的数据库客户数据中恢复数据,并将其插入到我的索引页面的表元素中。我已经设置了我的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
1条答案
按热度按时间gudnpqoy1#
这里你把所有客户的数据以数组的形式带进来,如果数据存在于响应中,尝试使用一个v-for循环来遍历客户的数组,并显示每个客户的数据,如下所示: