My paginate component does not seem to be working properly and only displays the first page despite the number of total objects I want to display:
Paginate component:
<paginate v-if="searchResults.length >0" class="m-2">
:page-count="getPageCount"
:page-range="3"
:margin-pages="1"
:click-handler="clickCallback"
:prev-text="'Prev'"
:next-text="'Next'"
:container-class="'pagination'"
:page-class="'page-item'"
:active-class="'currentPage'">
</paginate>
Javascript:
data() {
return {
searchTerm: '',
searchResults: [],
perPage:3,
currentPage: 1
};
},
components: {
paginate: VuejsPaginateNext,
},
computed: {
// Returns the data according to the page number
getItems:function() {
let current = this.currentPage * this.perPage;
let start = current - this.perPage;
return this.searchResults.slice(start, current);
},
// Returns total number of pages required according to the total rows of data
getPageCount:function() {
return Math.ceil(this.searchResults.length / this.perPage);
}
},
methods: {
clickCallback: function(pageNum) {
this.currentPage = Number(pageNum);
},
search(searchTerm) {
const lowerCaseTerm = searchTerm.toLowerCase();
const searchWords = lowerCaseTerm.split(/\s+/); // Splitting by whitespace
const query = searchWords.join('+');
const url = `https://openlibrary.org/search.json?title=${query}`;
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
this.searchResults = data.docs; // Assuming the API returns an array of results in 'docs'
})
.catch(error => {
console.error('Error fetching search results:', error);
});
}
}
I've tried logging the result of getPageCount() to my console as well and it seems to be calculating the right value. Any suggestions as to what could be the problem? I'm also getting a warning that says I'm missing the pageCount prop even though its there:
It was a syntax error... there's a closing tag after class="m-2" that shouldn't be there