Vue/ WordPress API Pagination and Search issue

Hello I am new to Vue and looking for a little help with the following issues..

I have search filter and a pagination but I can’t get them to work together.

When I run a search it only searches the cuurent page, I need it to search all pages and return result.
If the search result item count is over the per_page then the remaining items should be on the next page.

Also I am having issues with pagination, I need it numbered but so far I can only get it to add 1 or subtract 1 from page.

Any help would be greatly appreciated..

The Code

<template>
<div>
<div style=”height:200px;background:red;”>
<input v-model=”search” type=”text” placeholder=”Search title..”>
<label>
Search title:
</label>
</div>
<div class=”pagination-wrap”>
<mdb-pagination color=”dark”>
<mdb-page-nav prev />
<mdb-page-item active>
1
</mdb-page-item>
<mdb-page-item>
<div class=”button” v-on:click=”currentPage == 2″>2 </div> // this doesn’t work
</mdb-page-item>
<mdb-page-item>
3
</mdb-page-item>
<mdb-page-item>
4
</mdb-page-item>
<mdb-page-item>
5
</mdb-page-item>
<mdb-page-nav next />
</mdb-pagination>
<div class=”page-nav”>
<div class=”button” v-on:click=”currentPage -= 1″>- </div> // this does work
<label>You’re on page: {{ currentPage }}</label>
<div class=”button” v-on:click=”currentPage += 1″>+</div>
</div>
</div>
<mdb-container fluid style=”position:relative;min-height:500px;”>
<!–Section: Additional cards–>
<section class=”mb-5″>
<div class=”row”>
<div v-for=”item in filteredList” :key=”item.id” class=”col-md-3 my-3 animated fadeIn”>
<mdb-card class=”card”>
<div class=”bite-top”>
category:{{ item.categories }}
</div>
<mdb-card-image top :src=”item.featured_image_url” alt=”Card image cap” style=”margin-top: 50px;” />
<mdb-card-body>
<h4 class=”card-title”>
{{ item.title.rendered }}
</h4>
<nuxt-link :to=”{name: ‘post-id’, params: { id:item.id } }”>
<mdb-btn rounded class=”myred”>
Button
</mdb-btn>
</nuxt-link>
</mdb-card-body>
</mdb-card>
</div>
</div>
</section>
<div id=”myspinner” class=”hideMe”>
<div class=”spinner-border” style=”width: 6rem; height: 6rem;” role=”status”>
<span class=”sr-only”>Loading…</span>
</div>
</div>

<!–Section: Additional cards–>
</mdb-container>
</div>
</template>

<script>
import { mdbContainer, mdbBtn, mdbCard, mdbCardBody, mdbCardImage, mdbPagination, mdbPageItem, mdbPageNav } from ‘mdbvue’
import axios from ‘axios’
const url = ‘http://localhost/wuxt/wp-json/wp/v2/posts?per_page=2&page=’
export default {
layout: ‘backend’,
name: ‘LearningBites’,
components: {
mdbContainer,
mdbBtn,
mdbCard,
mdbCardBody,
mdbCardImage,
mdbPagination,
mdbPageItem,
mdbPageNav
},
data () {
return {
items: [],
currentPage: 1,
search: ”,
term: ”,
isLoading: false
}
},
mounted () {
this.getItems()
},
watch: {
currentPage: ‘getItems’
},
computed: {
filteredList () {
return this.items.filter((item) => {
return item.title.rendered.toLowerCase().includes(this.search.toLowerCase())
})
}
},
methods: {
getItems () {
const self = this
axios.get(url + self.currentPage).then((response) => {
this.items = response.data
})
}
},
pageUp () {
this.currentPage = this.currentPage + 1
this.items = null
}

}
</script>

Read more here:: Vue/ WordPress API Pagination and Search issue

Leave a Reply

Your email address will not be published. Required fields are marked *