Как получить списки данных из JSON с помощью Vue Axios бесконечной прокрутки

Question

Я хотел бы импортировать данные из Vue.js в axios и применить бесконечную прокрутку.

и хотите, чтобы данные json отображались по порядку. Теперь только индекс [0] повторяется. Как мы можем решить это? Спасибо.

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();
  }
})

Answer 1

Здесь есть несколько проблем. Во-первых, когда вы прокручиваете страницу вниз, вы вызываете метод addPost, верно? Но сам метод не знает, какую «страницу» загружать. Он делает один и тот же запрос снова и снова. Это означает, что он каждый раз получает одни и те же результаты.

Затем вы используете это let api = response.data[0];, что означает, что независимо от того, какие результаты вы получите, вы получите только первый элемент из списка и отправите его в свой локальный массив.

Что вам нужно сделать, это следить за виртуальной «страницей», которую вы загружаете, то есть каждая addPost подобна загрузке дополнительных элементов из виртуальной нумерации страниц и просто помещению их в конец бесконечного списка, вместо перезагрузки страницы. Затем вам нужно передать этот параметр методу, который загружает эти новые элементы, и подготовить бэкэнд для возврата определенных элементов на основе параметров запроса.

Удачи!