I'm building a component on my project, which is actually getting all the data and console logging it, but here's the problem: Inside my array of clients, i have some objects (address, documents, ...), and i can't manage to call them on my table.

My script:

<script>
export default {
  data: () => ({
    clients: [],
  }),

  methods: {
    getClients() {
      this.$api
        .get("/api_v1/clientes", {
        })
        .then((response) => {
          this.clients = response.data[0];
          console.log(response.data);
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },

  mounted() {
    this.getClients();
  },
};
</script>

My table (inside ):

 <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">
              {{ `${client.address.localidade} / ${client.address.uf}` }}
            </td>
            <td v-else>-</td>

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

              <i  style="color: green"></i>
              <i  style="color: red"></i>
            </td>
          </tr>
        </tbody>

My controller:

  public function index(Request $request)
    {
        $data = [
            'pag' => 'All clients',
            'link' => '/'
        ];

        return view('clients.index', $data);
    }

The data:

Someone have a clue of a different approach i could have? I'm using Vue2. It's one of my first big projects, so previously sorry for any rookie mistake. Thanks for your time and help!

CodePudding user response：

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;

CodePudding user response：

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 ></i>
      </a>

      <i  style="color: green"></i>
      <i  style="color: red"></i>
    </td>
  </tr>
</tbody>