Refresh after new data added

[AO-IO]

Hi. thank you for the package. This package is the best so far for infinite scrolling !!!

I use vue-infinite-loading in my comments component. usually before using vue-infinite-loading when I add a comment I call a fetch method to see the new data.

I'm using Laravel.

    getComments($state) {
      axios
        .get(`/comment/${this.post}/fetchMore?page=` + this.page)
        .then(
          function(response) {
            if (response.data.data.length) {
              this.page++;
              if (this.comments.length === 0) {
                this.comments = response.data.data;
                console.log("gotten page: " + this.page);
              } else {
                this.comments = this.comments.concat(response.data.data);
              }
              $state.loaded();
            } else {
              $state.complete();
            }
          }.bind(this)
        )
        .catch(function(error) {
          return "There was an error.";
        });
    }

<infinite-loading @distance="1" spinner="spiral" @infinite="getComments" ref="infiniteLoading">
    </infinite-loading>

How is it possible to fetch newly added comments?

I tried to reset the status in a method but that didn't work (i saw that in a StackOverflow question)

      if (this.$refs.infiniteLoading) {
        return this.$refs.infiniteLoading.stateChanger.reset();
      }

I can't figure this out. :\ thank you

[heidarv]

Any answer?

[Sakthi002]

Any answer???

[seunafara]

We need an answer please, how can we recall the function

[minsoo-web]

Hey guys @heidarv @Sakthi002 @seunafara I solved this problem by this issue

first, add the ref="infiniteLoading"

second, call the function when you want

Tada..!

[JoaoHamerski]

Here is how you can refresh the data of InfiniteScroll: According to this part of documentation (https://peachscript.github.io/vue-infinite-loading/guide/use-with-filter-or-tabs.html)

Add a identifier prop to InfiniteLoading component

<InfiniteLoading 
    :identifier="infiniteId"
    @infinite="infiniteHandler"
></InfiniteLoading>

Add the infiniteId data to your component data:

data: function() {
    return {
        list: [],
        infiniteId: +new Date() // It will generate a random value based on current time
    }
}

Add a new method into your Vue component, i will call it refreshInfiniteLoading

methods: {
    refreshInfiniteLoading() {
        this.page = 1
        this.list = []

        // as said in the documentation 
        // "The infinite loading component will 
        // reset itself whenever the identifier property has changed"
        this.infiniteId += 1 
      },
}

Every time you want to refresh your data just call refreshInfiniteLoading method.