Currently, I have implemented a pagination indicator that displays the number of results on each page. For instance, page 1 shows '1-5' and page 2 shows '6-10 out of 50 results', and so on.
The logic for updating the results seems to be functioning correctly, but there is a small hiccup. Whenever I switch between pages, the results do not refresh automatically, forcing me to manually refresh the page to see updated information, which results in always showing '1-5'. As I am still learning Vue.js, I believe there might be a simple mistake in my code.
Is there any way I can ensure that the results update dynamically when I navigate through different pages?
Pagination.vue
<!-- Results counter -->
<PaginationResultIndicator :total-items="paginationData.totalItems"
:first-item="firstItem"
:last-item="lastItem"/>
// Script
data: () => ({
currentPage: -1,
limit: undefined,
firstItem: undefined,
lastItem: undefined
}),
created() {
this.currentPage = this.paginationData.current;
this.limit = this.paginationData.totalItems / this.paginationData.totalPages
this.lastItem = this.limit * this.paginationData.current;
this.firstItem = this.lastItem - this.limit + 1;
},