How get data lists from json using Vue axios infinite scroll

Question

I would like to import the data from Vue.js to axios and apply the infinite scroll.

and want to have json data displayed in order. Now only index [0] is being repeated. How can we solve it? Thank you.

https://jsfiddle.net/naeun/eywraw8t/131773/

   <div id="app">
      <section data-aos="fade-zoom-in" v-for="post in posts">
            <div class="post">
              <p class="colon" data-aos="fade-zoom-in"><span>“</span></p>
              <p class="quote">{{post.quote}}</p>
              <p class="colon" data-aos="fade-zoom-in"><span>”</span></p>
              <p class="author" data-aos="fade-zoom-in">{{post.author}}</p>
            </div>
        </section> 
    </div>

new Vue({
  el: "#app",
  data: {
    bottom: false,
    posts: []
  },
  methods: {
    bottomVisible() {
      const scrollY = window.scrollY;
      const visible = document.documentElement.clientHeight;
      const pageHeight = document.documentElement.scrollHeight;
      const bottomOfPage = visible + scrollY >= pageHeight;
      return bottomOfPage || pageHeight < visible;
    },
    addPost() {
      axios.get(`https://jsonplaceholder.typicode.com/posts`)
        .then(response => {
            let api = response.data[0];
            let apiInfo = {
              author: api.id,
              quote: api.title,
              tag: api.body
            };
            this.posts.push(apiInfo)
            if(this.bottomVisible()) {
              this.addPost();
            }
        })
        .catch(e => {
          console.log('Error: ', error)
        })
    }
  },
  watch: {
    bottom(bottom) {
      if (bottom) {
        this.addPost();
      }
    }
  },
  created() {
    window.addEventListener('scroll', () => {
      this.bottom = this.bottomVisible()
    });
    this.addPost();
  }
})

Andrey Popov · Accepted Answer · 2018-07-03 05:50:37Z

1

There are a few problems here. First, whenever you scroll to the bottom, you call the addPost method, right? But the method itself doesn't know which "page" to load. It does the very same request over and over again. Which means it gets the same results each time.

Then you use this let api = response.data[0];, which means that no matter what results you receive, you only get the first item from the list and push it to your local array.

What you need to do is to keep track of the virtual "page" that you are loading, meaning that each addPost is like loading additional items from a virtual pagination and just putting them at the end of the infinite list, instead of reloading the page. Then you need to pass this parameter to the method that loads those new items and prepare the backend to return specific items based on request parameters.

Good luck!

answered Jul 3, 2018 at 5:50

Andrey Popov

7,5404 gold badges45 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Petie Over a year ago

Thank you Andrey. Actually I don't know back-end, but it was good to explain the principle. I'll try to solve it!

Collectives™ on Stack Overflow

How get data lists from json using Vue axios infinite scroll

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related