Vue infinite loading with axios is skipping the page 2

Question

I am using vue infinite load to get comments from a local api. In the network tab on google chrome tools my page requests should load as follows:

101?page=1

101?page=2

101?page=3

101?page=4

But really what is happening is I'm getting duplicate of page 1 and it skips page 2:

101?page=1

101?page=1

101?page=3

101?page=4

Code

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."
        });
    },
}

Note: This page skip happens even if I change the parentPageCount prop to 2. So it would be: 101?page=2 101?page=2 101?page=4

Answer 1

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

I was calling the this.getComments(); twice. Once when the component was mounted and another time on infinite load.