Why I can't see my props from backend in my nuxt page?

Question

I'm making an index page nad I have to recover from my db customers data and insert it in a table element in my index page. I've set my props, mounted function with axios that get the data from the backend route and in a data function I return customers array,

my index.vue page:

<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>

if I write {{ customers }} the function return the list of customers fields but when I search for a specific data (for example {{ customers.name }}) it don't return me nothing, even errors.

Obviously I've set baseurl in nuxt.config with address of my laravel app

Answer 1

Here you bring the data of all customers in the form of an array, If the data exists in the response, try using a v-for loop to iterate through the customers' array and display the data for each customer. This would look something like this:

<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>