To remap the array to the desired format, you can use the map method on the original array and return a new array with the desired keys and values. Here's an example:
$originalArray = [
1 => "https://demo.test/users?page=1",
2 => "https://demo.test/users?page=2",
3 => "https://demo.test/users?page=3",
4 => "https://demo.test/users?page=4",
5 => "https://demo.test/users?page=5",
6 => "https://demo.test/users?page=6",
7 => "https://demo.test/users?page=7",
8 => "https://demo.test/users?page=8",
];
$remappedArray = collect($originalArray)->map(function ($url, $label) {
return [
'label' => $label,
'url' => $url,
];
})->values()->toArray();
// Output:
// [
// [
// 'label' => 1,
// 'url' => 'https://demo.test/users?page=1',
// ],
// [
// 'label' => 2,
// 'url' => 'https://demo.test/users?page=2',
// ],
// ...
// ]
In this example, we first convert the original array to a Laravel collection using the collect function. Then, we use the map method to iterate over each key-value pair in the collection and return a new array with the desired keys and values. Finally, we use the values method to reset the keys of the collection to consecutive integers starting from 0, and the toArray method to convert the collection back to a plain PHP array.
To use this remapped array in your pagination links, you can pass it to your view as follows:
return Inertia::render('Users', [
'users' => $mapped,
'pagination' => [
'links' => $remappedArray,
'currentPage' => $users->currentPage(),
'lastPage' => $users->lastPage(),
'perPage' => $users->perPage(),
'total' => $users->total(),
],
]);
Then, in your Vue component, you can iterate over the links array as follows:
<div v-if="pagination.links">
<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>
