I'm encountering an issue while setting up pagination with Vue. My goal is to load new tasks from jsonplaceholder when the numbers on the buttons are clicked.
I have managed to successfully load the first and second pages. I believe this is directly related to my this.fetchTodos() action. Being a beginner in Vue, I am seeking assistance in understanding how to update the data when transitioning to a new page without triggering a reload.
In this scenario, it is important for the URL of the page to change (GET request). While the page state changes, the posts do not load upon clicking on the third page.
Below, I have included the code snippets from four files which should provide insight into the current situation.
If it helps, you can also refer to the GitHub link and review the pagination branch.
Thank you in advance for your support! Feel free to leave any questions or requests for more information in the comments section.
The files include:
1. TodoListView.vue - the starting page where todos are fetched and displayed
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div class="todolist">
... (Vue template code)
</template>
... (Vue script code)
2. TodoListPaginationView - loads the second page and subsequent pages upon pagination click
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div class="todolist">
... (Vue template code)
</template>
... (Vue script code)
3. PaginationBootstrap.vue - contains the logic for pagination using UI Bootstrap 5 components
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
... (Vue template code)
</template>
... (Vue script code)
4. todosModule.js - includes Vuex logic for managing todos
import axios from "axios";
export const todosModule = {
state: () => ({
// State properties and mutations
}),
mutations: {
// Mutations for updating state
},
actions: {
// Actions for asynchronous operations
},
getters: {
// Getters to retrieve computed state values
},
namespaced: true
}