vuejs add filter to paginated list generated by json response - vuejs2

Question

I´ve just started with Vue and stuck with a basic question. Following this tutorial I´m receiving posts as json. The list of post gets paginated
displayedPosts() calculates and returns shown posts per page
methods: {
...
paginate (posts) {
let page = this.page;
let perPage = this.perPage;
let from = (page * perPage) - perPage;
let to = (page * perPage);
return posts.slice(from, to);
},
...
computed: {
displayedPosts () {
return this.paginate(this.posts);
},
...
Then Template is bound to displayedPosts:
<div class="col-md-4" v-for="post in displayedPosts">
<div class="card mb-4 box-shadow post-cards">
...
Now I´d like to add an input to filter the whole list.
// template input
<input type="search" placeholder="Search..." autofocus v-model="search">
// method to filter model
computed: {
...
filteredItems () {
return this.posts.filter(item => {
return item.title.toLowerCase().indexOf(this.search.toLowerCase()) > -1
})
}
In summary, the pagination does only allow a certain amount of items per page. The filter should hide all list items and only show posts which contain given string.
In case my filter method is correct how would I bind filteredItems to the template for loop as this is already bound to displayesPosts()?
Thanks a lot for your help!

Answer 1

You can change displayedPosts:
computed: {
displayedPosts () {
return this.paginate(this.filteredItems);
},
filteredItems () {
return this.posts.filter(item => {
return item.title.toLowerCase().indexOf(this.search.toLowerCase()) > -1
})
}
}