Javascript Axios为GET请求响应中的GET请求设置URL

这个问题很类似于

我已经与Laravel建立了一个Vue页面，并通过GET请求显示所有帖子。我还听到了一个Laravel ECHO事件，并

取消移动所有POST数组的值，使其显示在顶部

我已经设置了无限滚动和分页5结果每页使用。结果显示在页面上，从侦听器推送到数组也可以工作。但是，当无限滚动加载第二个结果页面时，第六个结果将被复制

前面提到的包接受
next\u cursor
一个偏移值作为参数，而不是
page=2
，因此它准确地加载该值而不重复

Controller.php

公共功能推送器（请求$Request）{
$jobs=Job:：orderBy（'id'，'desc'）->cursorPaginate（）；
return response（）->json（$jobs）；
}

Vue文件

    <template>
        <div>
            <h3 class="text-center">All Jobs</h3><br/>
            <div class="container">
                <div class="card" v-for="(job,index) in jobs" :key="index">
                    <div class="card-body">
                        <h4 class="card-title">{{ job.id }}</h4>
                        <p class="card-text">{{ job.request_type}}</p>
                    </div>
                </div>    
            </div>
            <infinite-loading  @infinite="getJob"></infinite-loading>
        </div>
    </template>
    <script>
        export default {
            data() {
                return {
                   page:1,
                   jobs: [],                
                }
            },       
            mounted() {           
                this.listenNewJobs();  
            },
            created() {
           
            },
            methods: {            
                listenNewJobs() {
                    Echo.channel('chat-room.1')
                        .listen('JobCreated', (e) => {
                            console.log(e);                        
                            this.jobs.unshift(e.job);                            
                        });
                    },
                    getJob($state) {
                        axios.get('getjobs', {                
                            params: {
                                page: this.page,                        
                            },
                       }).then(({data})=> {
                           console.log(data) 
                           if(data.data.length) {
                               this.page += 1;
                               this.jobs.push(...data.data)
                               $state.loaded();
                            } else {
                            $state.complete();
                        }
                    });                     
                }
            }        
        }
    </script>

任何帮助都将不胜感激

编辑：如何设置GET请求的URL以对已分页结果的GET请求响应中的结果进行分页，以避免第二页结果重复？
请尝试以下操作：

<script>
  export default {
    data() {
      return {
        jobs: [],
        isInitialLoaded: false,
        currentPage: 1,
        lastPage: 0,
      }
    },
    mounted() {
      this.listenNewJobs();
    },
    created() {
      //
    },
    methods: {
      listenNewJobs() {
        Echo.channel('chat-room.1')
          .listen('JobCreated', (e) => {
              console.log(e);
              this.jobs.unshift(e.job);
        });
      },
      async getJob($state){
        await this.fetchData().then((response) => {
          this.lastPage = response.data.last_page;
          if (response.data.data.length > 0) {
            response.data.data.forEach((item) => {
              const exists = this.jobs.find((job) => job.id == item.id);
              if (!exists) {
                // this.jobs.unshift(item); // Add to front of array
                this.jobs.push(item);
              }
            });
            if (this.currentPage - 1 === this.lastPage) {
              this.currentPage = 2;
              $state.complete();
            } else {
              this.currentPage += 1;
            }
            $state.loaded();
          } else {
            this.currentPage = 2;
            $state.complete();
          }
        });
        this.isInitialLoaded = true;
      },
      fetchData() {
        const url = this.isInitialLoaded ? `/getjobs?page=${this.currentPage}` : `/getjobs`;
        return axios.get(url);
      },
    }
  }
</script>


导出默认值{
数据（）{
返回{
职位：[]，
Isinitialoaded:错误，
当前页面：1，
最后一页：0，
}
},
安装的（）{
this.listenNewJobs（）；
},
创建（）{
//
},
方法：{
listenNewJobs（）{
Echo.channel（'chat-room.1'）
.listen（'JobCreated'，（e）=>{
控制台日志（e）；
this.jobs.unshift（e.job）；
});
},
异步getJob（$state）{
等待此消息。fetchData（）。然后（（响应）=>{
this.lastPage=response.data.last_page；
如果（response.data.data.length>0）{
response.data.data.forEach（（项目）=>{
const exists=this.jobs.find（（job）=>job.id==item.id）；
如果（！存在）{
//this.jobs.unshift（item）；//添加到数组前面
this.jobs.push（项目）；
}
});
if（this.currentPage-1==this.lastPage）{
this.currentPage=2；
$state.complete（）；
}否则{
此.currentPage+=1；
}
$state.loaded（）；
}否则{
this.currentPage=2；
$state.complete（）；
}
});
this.isinitialoaded=true；
},
fetchData（）{
const url=this.isinitialoaded？`/getjobs？page=${this.currentPage}`:`/getjobs`；
返回axios.get（url）；
},
}
}
谢谢，我得到的是一个
属性或方法“jobs”没有在实例上定义，而是在渲染过程中引用的。
当它在方法add
const self=this中初始化时
并将所有
此
更改为
自身
。它可能会丢失与此的绑定，但将其放入self常量将确保它将其保留在回调中。相应地更改了它，但没有运气抛出相同的错误。非常奇怪，我将您的方法添加到以前的脚本代码中，效果非常好。我想知道脚本中是否还有缓存，我也停止并启动了npm watch。感谢伟大的helpAn Arrow函数，因此分配给
self
并使用它应该不会有什么区别。问题是什么？@ConnorLow如何设置GET请求的URL，以对已分页结果的GET请求响应的结果进行分页，以避免第二页结果重复请回答您的问题。