[Vuejs]-Trying to implement infinite scrolling with VueJS and Axios

by

0👍

✅

I checked your code. You are probably trying to do the same as in this tutorial: https://vueschool.io/articles/vuejs-tutorials/build-an-infinite-scroll-component-using-intersection-observer-api/
And It’s works in that tutorial. Observer works as expected in your code, but you don’t make any request on intersected event.
I changed you component and now it works:

export default {
  name: "GameList",
  data() {
    return {
      list: [],
      page: 1
    };
  },
  components: {
    Observer
  },
  methods: {
    async intersected() {
      const res = await fetch(
        `https://api.rawg.io/api/games?page=${this.page}&_limit=50`
      );

      this.page++;
      const items = await res.json();
      this.list = [...this.list, ...items.results];
    }
  }
};

Leave a comment