Page doesn't update on pagination click in Laravel SPA - laravel

Question

I am creating an SPA with Laravel and VUEJS. Everything works well:
- The routing changes accurately from /people to /people?page=2
- The data in the table displays correctly.
But, the problem is, if I click the pagination, the data inside the table doesn't update. The URL is updated /people?page=3 but records are still the same. Here are my codes below.
routes.js
export default[
{
path:'/people?page=:page',
component: ListPeople,
name: 'people.paginate',
meta:{
title: 'Paginate'
}
},
{
path: '/people',
component: ListPeople,
name: 'people.list',
meta: {
title: 'People List',
}
},
ListPeople.vue
I have listed here the table.
<template>
<div class="container">
<h1>People List</h1>
<vue-table v-bind="{data:people.data,columns}"></vue-table>
<vue-pagination :pagination="people"
#paginate="getPeople"
:offset="4">
</vue-pagination>
</div>
Paginate.vue
From my pagination, I have something like below:
<template>
<!-- more codes here -->
<router-link class="page-link" :to="{ name:'people.paginate', params:{ page: page }}">{{ page }}</router-link>
<!-- more codes here -->
</template>
<script>
export default{
props: {
pagination: {
type: Object,
required: true
},
offset: {
type: Number,
default: 4
}
},
computed: {
pagesNumber() {
if (!this.pagination.to) {
return [];
}
let from = this.pagination.current_page - this.offset;
if (from < 1) {
from = 1;
}
let to = from + (this.offset * 2);
if (to >= this.pagination.last_page) {
to = this.pagination.last_page;
}
let pagesArray = [];
for (let page = from; page <= to; page++) {
pagesArray.push(page);
}
return pagesArray;
}
},
methods : {
changePage(page) {
this.pagination.current_page = page;
this.$emit('paginate',page);
}
}
}
</script>

Answer 1

You need to add a key to your vue-table component that changes when the pagination changes.
<vue-table v-bind="{data:people.data,columns}" :key="currentPage" ></vue-table>
So in your ListPeople component perhaps in your getPeople method update the key as you paginate.
data(){
return:{
currentPage: 1;
}
}
methods:{
getPeople(page){
//.. do something
this.currentPage = page;
}
}
If you include a key on a child component, when the parent template renders, Vue sets a getter/setter on the key and automatically adds it to the watcher instance of the component. So when the key changes it automatically rerenders the child component. Without the key the child component will remain in its cached state.