Laravel和vue无限装载机和分页问题

Question

我的项目：

我有很多帖子，索引方法返回分页的帖子，每页3条。

然而，在我的Vuejs中，我不想显示页面，我使用无限滚动来显示接下来的3篇文章，每次用户滚动到页面底部。

每次我删除一个帖子，我设法删除它的实时与vue。页面不会刷新，文章将被实时删除。

问题：

当我在前端加载帖子时，我加载了3个帖子，然后删除了一个帖子，例如post #1。

据我们所知，

第二页在laravel中的意思是转义前3篇文章，并得到第二组3篇文章。

现在，当我从数据库中删除第一个帖子时，当我进入im页面的底部时，我希望得到#4 #5 # #6，但我会得到#5 #6 #7。

原因：

因为数据库中有一篇文章，下一组3篇文章现在不同了。

但是如何解决这个问题？有解决这个问题的方法吗？

Answer 1

我认为最好的解决方案是在每次删除请求之后更新帖子数组。只需在删除操作后立即使用当前页面发出GET请求，并更新数组，并向现有数组添加新值(如果有的话)。现在我已经为它编写了一个示例代码，希望它能有所帮助。因为您没有共享代码，所以您的组件可能有代码

<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>

记住，当点击页面底部时，current_page值要增加1。