0👍
-
You are not updating the
page
andlimit
in the Vuex store correctly. You are trying to commit the mutation with the wrong data. Thelimit
andpage
are not part of theliveEvents.data
object, they are part of the variables you sent in the query. -
You are not watching the Vuex store for changes in the
events
state. This means that when theevents
state changes, your component does not react to these changes. -
You are initializing
posts
in thedata
function and then pushing to it in thegetPosts
method. This is not reactive and Vue will not be able to track changes toposts
.
Here’s how you can fix these issues:
- Update the
fetchEvents
action to commit the correctlimit
andpage
:
actions: {
async fetchEvents({ commit, state }) {
// ...
commit('allEvents', response.data.liveEvents.data);
commit("limit", state.limit),
commit("page", state.page)
// ...
},
}
- Watch the Vuex
events
state in your component and updateposts
when it changes:
watch: {
'$store.state.events': {
handler: function(events) {
this.posts = events;
},
immediate: true,
},
posts() {
this.setPages();
}
},
-
Remove the
getPosts
method and thecreated
lifecycle hook as they are not needed anymore. -
Initialize
page
to 1 instead of 0 in your Vuex store:
state: {
limit: 12,
page: 1,
events: [],
},
- Update the
paginate
method to handle the case whenpage
is 0:
paginate(posts) {
let page = this.page;
let perPage = this.perPage;
let from = (page * perPage) - perPage;
let to = (page * perPage);
return page > 0 ? posts.slice(from, to) : [];
}
- Update the
v-if
condition in the Previous button to check ifpage
is greater than 1:
<button type="button" v-if="page > 1" @click="page--"> Previous </button>
With these changes, your pagination should work correctly.
- [Vuejs]-Add validation rule in yup based on external condition
- [Vuejs]-Flattening multiple reactive arrays looses the reactivity (Array.flat())