Блог

Я настроил проект, в котором я ограничиваю ответ API до 5, и после прокрутки до нижней части страницы я делаю новый вызов API для извлечения следующих 2 элементов в API. Но с текущим кодом он проверяет только, существуют ли 5 ранее извлеченных элементов в состоянии cards. Я совершенно не уверен в том, как получить 2 следующих элемента в API? У кого-нибудь есть какие-либо предложения относительно того, как это сделать? Спасибо,

 var app = new Vue({
el: '#app',
data: {
    cards: []
},
methods: {
    scroll(card) {
        window.onscroll = () => {
            let bottomOfWindow = document.documentElement.scrollTop   
            window.innerHeight === document.documentElement.offsetHeight;
            if(bottomOfWindow) {
            const url = 
            'https://api.jsonbin.io/b/5cab36508b8d1301a25bd8fa/1/';
                axios.get(url)
               .then(response => {
               for (var i = 0; i < this.cards.length; i  ) {
                            console.log('Cards id: ', this.cards[i].id)
                            if(this.cards[i].id !== 
                            response.data.results[i].id){            
                                for (var x = 0; x < 2; x  ) {   
                                this.cards.push(response.data.results[x])
                                }

                            } else{
                                console.log('No more cards to load')
                            }
                        }
                    }
                })
            }
        }
    },
    getAPI(){
        const url = 'https://api.jsonbin.io/b/5cab36508b8d1301a25bd8fa/1/';


            axios.get(url)

            .then(response => {
                for (var i = 0; i < 5; i  ) {
                    this.cards.push(response.data.results[i]);
                }
            })
            .catch(function (error) {
                console.log(error);
            })
            .then(function () {
                // always executed
            });
        console.log(this.cards)

    }
},
mounted() {
    this.scroll(this.card)
}
})
  

Изменен метод, с помощью которого вы выполняете проверку. Вместо того, чтобы делать это по длине карт, вы перебираете длину результатов, и как только вы достигнете карты, которая не существует, вы добавляете их, отслеживаете добавленную сумму и возвращаетесь через 2 или когда их не осталось. Я изменил логику цикла на so.

 //Card with position i from results doesn't exist
if(this.cards[i] == undefined){
   //add this card - maybe add more logic to check for duplicate incase of reordering of response
   this.cards.push(response.data.results[i])
   //track card added
   cardsAdded  ;
} else {
    console.log('No more cards to load')
}

//check if cards added has reach limit of 2
if(cardsAdded == 2)
    return;
  

Смотрите: https://jsfiddle.net/as4dm03q /