Why does pagination link click in Vuetify pagination component give "No matching records found" message

Question

I am trying to use Vuetify datatable and pagination components to show a paginated list of projects. But when I click on pagination link to display next page of data, I am seeing the message “No matching records found”. Clicking on next page calls next method that seems to get the correct data from server side (Rub on Rails) and setting projects and pagination data properties. The relevant vue file is in github at https://github.com/navjeetc/vuejs_rails/blob/vue_component/app/javascript/parts/projects.vue

Am I not setting everything or not calling axios propertly? I am new to Vue.

Answer 1

So I figured out the solution by looking at Vuetify source code. The solution is to set another prop on v-data-table component called total items e.g. :total-items="totalProjects" and add the data property totalProjects and set it appropriately. Hope it helps others.