I am currently working on adding pagination feature to manage the number of quotes displayed in my Vue.Js application. I have created a function that divides the quotes based on the paginationLimit value. However, I am encountering an issue where the updateVisibleQuotes() method is not properly splitting the original quotes_list array.
new Vue({
el: '#app',
data: {
search: '',
showMovieQuotes: false,
showGameQuotes: false,
quotes_list: [],
visibleQuotesList: [],
currentPage: 0,
paginationLimit: 3,
},
mounted(){
fetch("https://gist.githubusercontent.com/benchprep/dffc3bffa9704626aa8832a3b4de5b27/raw/quotes.json")
.then(response => response.json())
.then((data) => {
this.quotes_list = data;
})
.then(
this.updateVisibleQuotes()
)
},
methods{
updatePage(pageNumber){
this.currentPage = pageNumber;
this.updateVisibleQuotes();
},
updateVisibleQuotes() {
this.visibleQuotesList = this.quotes_list.splice(this.currentPage * this.paginationLimit, (this.currentPage * this.paginationLimit) + this.paginationLimit)
console.log(this.visibleQuotesList);
if (this.visibleQuotesList.length == 0 && this.currentPage > 0) {
this.updatePage(this.currentPage - 1);
}
}
},
computed{
// Filters quotes by looping through quotes_list and matching whats in search
filteredQuotes: function () {
return this.quotes_list.filter((quote) =>{
return quote.quote.match(this.search) || quote.theme.match(this.search)
})
},
}
})
When I invoke the visibleQuotesList within the mounted() lifecycle, I expected it to contain an array of 3 items, however, it returns an empty array. Should I be calling the updateVisibleQuotes method elsewhere in the component lifecycle?