用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();。一次是在安装组件时，另一次是在无限负载下。