I am looking to integrate pagination from the response data into my existing code, while also incorporating filters.
JavaScript
var entriesList = new Vue({
el: "#post-list-template",
data: {
posts: [],
categories: [],
currentEntries: ''
},
created: function () {
this.fetchData();
},
watch: {
currentEntries: 'fetchData'
},
methods: {
fetchData: function () {
var self = this;
var apiKey = 'my-key';
axios.get('/wp-json/frm/v2/views/16', {
headers: {
Authorization: 'Basic '+ btoa( apiKey +':x' )
},
params: {
phouse: self.currentEntries
}
})
.then((response) => {
this.posts = response.data.renderedHtml;
})
.catch((e) => {
console.error(e)
})
//fetch all category data
axios.get('/wp-json/wp/v2/categories/')
.then(response => this.categories = response.data);
}
}
})
The pagination html structure in the response is as follows:
<ul class="frm_pagination">
<li class="active">
<a href="?frm-page-16=1">1</a>
</li>
<li class="">
<a href="?frm-page-16=2">2</a>
</li>
<li class="">
<a href="?frm-page-16=3">3</a>
</li>
<li class="dots disabled">...</li>
<li class="">
<a href="?frm-page-16=40">40</a>
</li>
<li class="">
<a href="?frm-page-16=2" class="next">></a>
</li>
</ul>
To implement functionality, I need to intercept the default behavior of the paginated links, extract the page number upon clicking, and utilize it in my API call like so: /wp-json/frm/v2/views/16/?page=2