I'm struggling with getting Laravel pagination to function properly. Although I attempt to access results from different pages, I find that I can only retrieve the first page. Even when I click on page 2, upon checking the request payload, it always indicates that it's still on page one. Moreover, when I select the button for page two, it briefly highlights as active before reverting back to the first button being active.
Below is my pagination component:
<template>
<nav class="LAYOUTpagination1_maincontainer container">
<button class="LAYOUTpagination1_link c_dark fs_normal link" type="button" @click.prevent="changePage(1)" :class="{ 'disabled' : pagination.current_page <= 1 }">
<i class="fas fa-angle-double-left"></i>
</button>
<button class="LAYOUTpagination1_link c_dark fs_normal link" type="button" @click.prevent="changePage(pagination.current_page - 1)" :class="{ 'disabled' : pagination.current_page <= 1 }">
<i class="fas fa-angle-left"></i>
</button>
<a class="LAYOUTpagination1_link c_dark fs_normal semi_bold link" type="button" @click.prevent="changePage(page)" v-for="(page, index) in pages" :key="index" :class="isCurrentPage(page) ? 'LAYOUTpagination1_active' : ''" >{{ page }}</a>
<button class="LAYOUTpagination1_link c_dark fs_normal link" type="button" @click.prevent="changePage(pagination.current_page + 1)" :class="{ 'disabled' : pagination.current_page >= pagination.last_page }">
<i class="fas fa-angle-right"></i>
</button>
<button class="LAYOUTpagination1_link c_dark fs_normal link" type="button" @click.prevent="changePage(pagination.last_page)" :class="{ 'disabled' : pagination.current_page >= pagination.last_page }">
<i class="fas fa-angle-double-right"></i>
</button>
</nav>
</template>
<script>
export default {
name:'LAYOUTpagination1',
computed: {
pages() {
let pages = [];
let from = this.pagination.current_page - Math.floor(this.offset / 2);
if (from < 1) {
from = 1;
}
let to = from + this.offset - 1;
if (to > this.pagination.last_page) {
to = this.pagination.last_page;
}
while (from <= to) {
pages.push(from);
from++;
}
return pages;
}
},
props:
{
pagination: { required:true },
offset: { default:4, type:Number },
},
methods:
{
isCurrentPage: function(page) {
return this.pagination.current_page === page;
},
changePage: function(page)
{
if (page > this.pagination.last_page)
{
page = this.pagination.last_page;
}
this.pagination.current_page = page;
this.$emit('paginate',page);
}
}
}
</script>
Here is my other component where I retrieve results:
<layout-pagination-1 v-if="pagination && pagination.last_page > 1" :pagination="pagination" @paginate="onGetPostsAndCategoriesPaginated"></layout-pagination-1>
methods:
{
handlePagination(pagination)
{
this.pagination = pagination;
this.page = pagination.current_page;
this.numberOfPages = pagination.last_page;
},
async onGetPostsAndCategoriesPaginated()
{
this.loader = 0;
try
{
console.log('pagination',this.pagination);
this.loader = 1;
let params = { page:this.page, paginate:this.paginate };
let response = await axios.get('/api/posts/get-posts-and-categories', { params: params });
this.loader = 2;
console.log(response.data.posts);
this.posts = response.data.data.data;
this.handlePagination(response.data.pagination);
console.log(this.posts);
}
catch (error)
{
this.loader = 3;
throw error;
}
},
}
Your help is greatly appreciated.