Laravel and vue infinite loader and pagination problem - laravel

Question

My project:
I have many posts, the index method returns paginated posts, 3 per page.
However in my Vuejs i don't want to show pages and i use infinite scrolling to show next 3 posts every time user scrolls to bottom of the page.
Everytime i remove a post i manage to remove it in realtime with vue. Page won't get refreshed and the post gets deleted in realtime.
The problem:
When i load posts in frontend, i have 3 posts loaded, then i remove a post for example post #1.
As we know second page in laravel means escape first 3 posts and get the second set
of 3 posts.
Now with the first post removed from database, when i go to bottom of page im expecting to get posts #4 #5 #6, but i will get #5 #6 #7.
reason:
because one post is gone in database and the next set of 3 posts are different now.
But how to solve this?
is there a solution for this problem

Answer 1

Well I think best solution is to update the array of Posts after every delete request. Simply make GET request with current page right after delete operation and update the array and add new value to existing array, if any. Now I have written a sample code for it I hope it will help.
Since you didn't share code so possible Code for your Component
<template>
<div>
<div v-for="post in posts" :key="post._id">
<div>{{post.name}}</div>
<div>
<button #click="deletePost(post)">Delete</button>
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
export default() {
data() {
current_page: 1,
posts: []
},
created() {
this.updatePosts();
},
methods: {
updatePosts() {
axios.get("http://www.example.com/posts"{
params: {page: this.current_page}
}).then(res => {
if(res.status == '200') {
res.data.posts.forEach(post => {
if(!this.posts.includes(post)) this.posts.push(post);
});
}
}).catch(err => console.log(err));
},
deletePost(post) {
axios.delete("http://www.example.com/posts",{
params: {id: post.id}
}).then(res => {
if(res.status == '200') {
this.updatePosts(); // this will update array
}
}).catch(err => console.log(err));
}
}
}
</script>
Remember to increase current_page value by 1 when hit bottom of page.