使用 axios 的 Vue 无限加载正在跳过第 2 页

Question

我正在使用 vue infinite load 从本地 api 获取评论。在 google chrome 工具的网络选项卡中，我的页面请求应加载如下：

101?page=1

101?page=2

101?page=3

101?page=4

但实际情况是我得到了第 1 页的副本，它跳过了第 2 页：

101?page=1

101?page=1

101?page=3

101?page=4

代码

data() {
    return {
        comments: [],
        parentPageCount: 1,
        postId: 101,
        loggedInUser: null,
    }
}
mounted(){
        //this.getComments();
},
methods:{
    getComments: function($state){
        axios({
            method: 'GET',
            url: 'mysite.com/'+this.postId+'?page='+this.parentPageCount,
            data: {

            }
        }).then(function (response) {

            this.loggedInUser = response.data.user;

            if (response.data[0].data.length) {
                this.parentPageCount ++;
                if (this.comments.length === 0) {
                    this.comments = response.data[0].data;
                    console.log('gotten page: '+this.parentPageCount);
                } else {
                    this.comments = this.comments.concat(response.data[0].data);
                }
                $state.loaded();
            } else {
              $state.complete();
            }
        }.bind(this))
        .catch(function (error) {
            return "There was an error."
        });
    },
}

注意： 即使我将 parentPageCount 属性更改为 2，也会发生此页面跳转。所以它会是：101?page=2 101?page=2 101?page=4

Answer 1

mounted(){
  //this.getComments();
},

我给 this.getComments(); 打了两次电话。一次是在安装组件时，另一次是在无限负载下。

使用 axios 的 Vue 无限加载正在跳过第 2 页

Vue infinite loading with axios is skipping the page 2

javascript

vue.js

axios

vue-infinite-loading