Help with pagination in Laravel / Vue with collection mapping

Hello, I am trying to work out pagination in Vue. On the server side I have the following code to create a 'users' object that both paginates & maps over the object.

Route::get('/users', function () {
    sleep(1);
    $users = User::paginate(15);
    $mapped = $users->map(function ($user) {
        return [
            'id' => $user->id,
            'name' => $user->name,
            'email' => $user->email,
            'created_at' => $user->created_at->format('d/m/Y'),
        ];
    });
    $mapped['links'] = $users->links();
    //$links = $users->links();
    //dd($links);
    return Inertia::render('Users', [
        'users' => $mapped,
        //'links' => $links,
    ]);
})->name('users');

This returns a collection of users, that is paginated by 15 - but when I die & dump $mapped['inks'] there collection/array is empty & when I try to use users.links to render the data on the client side, the object is empty. This was a suggestion from LaryAi to do it this way.

As this does not work how can I add make sure the key value pair is populated with the links & the object is not empty on the client side.

I need to make sure that my pagination code in the UsersView.vue still works. This is the my UsersView.vue code:

<script setup>
defineProps({
    users: Object,
});

</script>

<template>
    <AppHead title="Users">
        <meta name="description" content="Users page description">
    </AppHead>
        <div>
            <h1 class="border-b border-gray-400 pb-4 mb-4">Users List</h1>
            <!-- User list -->
            <ul>
                <li v-for="user in users" :key="user.id">
                    {{ user.name }}
                </li>
            </ul>
            {{ users.links }}
            <!-- Pagination links -->
            <div v-for="(link, key) in users.links" :key="key">
                <a v-if="link.url" :href="link.url">{{ link.label }}</a>
                <span v-else>{{ link.label }}</span>
            </div>
        </div>
</template>

Thanks in advance for your help!

LaryAI

3 years ago

Best Answer

Level 58

The issue is that the links are not being added to the mapped collection correctly. Instead of adding the links as a property to the mapped collection, they should be added as a separate property. Here's an updated version of the server-side code:

Route::get('/users', function () {
    sleep(1);
    $users = User::paginate(15);
    $mapped = $users->map(function ($user) {
        return [
            'id' => $user->id,
            'name' => $user->name,
            'email' => $user->email,
            'created_at' => $user->created_at->format('d/m/Y'),
        ];
    });
    $links = $users->links();
    return Inertia::render('Users', [
        'users' => $mapped,
        'pagination' => [
            'links' => $links->links(),
            'currentPage' => $links->currentPage(),
            'lastPage' => $links->lastPage(),
            'perPage' => $links->perPage(),
            'total' => $links->total(),
        ],
    ]);
})->name('users');

And here's an updated version of the Vue component:

<template>
  <AppHead title="Users">
    <meta name="description" content="Users page description" />
  </AppHead>
  <div>
    <h1 class="border-b border-gray-400 pb-4 mb-4">Users List</h1>
    <!-- User list -->
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
    <!-- Pagination links -->
    <div v-if="pagination">
      <div v-for="(link, key) in pagination.links" :key="key">
        <a v-if="link.url" :href="link.url">{{ link.label }}</a>
        <span v-else>{{ link.label }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'

defineProps({
  users: Object,
  pagination: Object,
})
</script>

Note that the pagination property is now being passed separately from the users property, and it includes all the necessary pagination data. The Vue component now checks for the existence of pagination before rendering the pagination links.

Please or to participate in this conversation.