[Vuejs]-Page doesn't update on pagination click in Laravel SPA

by

0👍

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.

Leave a comment