Laravel和Vue无限加载程序和分页问题

Question

我的项目：我有很多帖子，index方法返回分页的帖子，每页3个。但是在我的Vuejs中，我不想显示页面，并且每次用户滚动到页面底部时，我都会使用无限滚动显示下3个帖子。每次我删除帖子时，我都会使用vue实时删除它。页面不会刷新，并且帖子会被实时删除。

问题：当我在前端加载帖子时，我加载了3个帖子，然后我删除了一个帖子，例如帖子＃1。

[据我们所知，laravel的第二页意味着逃脱前3个帖子并获得第二组之3帖子。

现在将第一篇文章从数据库中删除，当我进入页面底部时，我希望获得文章＃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。