[Vuejs]-Is there a way of displaying the value of an object inside an array?

by

0👍

This line is only getting the first client:

this.clients = response.data[0];

response.data is your array of clients (from the looks of things). When you use .data[0], you’re getting the first element of the array (i.e. the first client).

Then, this line is trying to loop over 1 client, not an array of clients.

<tr v-for="client in clients" v-bind:key="client.id">

Try changing

this.clients = response.data[0];

to

this.clients = response.data;

If that doesn’t work (it looks like you’ve got a weird data structure), try this instead:

this.clients = response.data.data;

Or this (it’s unclear to me how many nested data properties you have):

this.clients = response.data.data.data;

0👍

I just made a quick analysis about your code. I think you should polish it a little bit.

Let me start with a quick catch up:
Update yuor js section with:

<script>
export default {
  // Please do use the function format instead of lambda expression, it's recommended in the vue2 docs.
  data() {
    return {
      clients: [],
    };
  },

  methods: {
    // Change this to an async method, so you can have more control on your code.
    async getClients() {
      try {
        /** 
         * Here, you should have to know, that your file `routes/api.php` hass all of the prefixed /api routes
         * So you have a direct access to /api prefixed routes
         * Additionally read a little bit about destructuring.
         */
        const response = await this.$api.get("/api/clientes");

        // Now, please notice that you have 2 data path names.
        this.clients = response.data.data; // {or please follow the correct path to the array container of the clients}.
      } catch (e) {
        console.log("Check this error: ", e);
      }
    },
  },

  // Now, change your mounted to an async method
  async mounted() {
    // Trust me this is going to work perfectly.
    await this.getClients();
  },
};
</script>

Now, please, please change your api controller logic to a response()->json(...)

public function index(Request $request)
{
  // Your retrieve logic...

  return response()->json($data);
}

Finally if you have successfully configured everything abouve, your vue component should be able to retrieve the information correctly, and your tbody must work this way…

<tbody>
  <tr v-for="client in clients" v-bind:key="client.id">
    <td>{{ client.id }}</td>
    <td>{{ client.name }}</td>
    <td>{{ client.email }}</td>
    <td>{{ client.documents.cpf || client.documents.cnpj }}</td>
    <td>{{ client.documents.celular }}</td>
    <td>{{ client.status }}</td>
    <td v-if="client.address">
      <!-- You can replace what you have with: -->
      {{ client.address.localidade }} / {{ client.address.uf }}
    </td>
    <td v-else>
      -
    </td>

    <td>
      <a :href="`/see-client/${client.id}`">
        <i class="icon-magnifier"></i>
      </a>

      <i class="icon-check" style="color: green"></i>
      <i class="icon-close" style="color: red"></i>
    </td>
  </tr>
</tbody>

Leave a comment