Vuejs2 vuejs向json响应生成的分页列表添加筛选器

我刚从Vue开始，一直在问一个基本问题。在此之后，我将以json的形式收到帖子。文章列表已分页

displayedPosts（）计算并返回每页显示的帖子

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);
  },
...

然后将模板绑定到displayedPosts：

<div class="col-md-4" v-for="post in displayedPosts">
  <div class="card mb-4 box-shadow post-cards">
...

...

现在我想添加一个输入来过滤整个列表

// 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
  })
}

//模板输入
//过滤模型的方法
计算：{
...
过滤数据（）{
返回this.posts.filter（项=>{
return item.title.toLowerCase（）.indexOf（this.search.toLowerCase（））>-1
})
}

总之，分页只允许每页有一定数量的项目。筛选器应隐藏所有列表项目，并仅显示包含给定字符串的帖子

如果我的filter方法正确，我将如何将filteredItems绑定到循环的模板，因为它已经绑定到displayesPosts（）

---

非常感谢您的帮助！

您可以更改

显示的帖子

：

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

---

啊，很抱歉，在设置

displayedPosts（）{返回this.paginate（this.filteredItems）；}，

pagination停止工作；（（但搜索正在工作）现在分页的行为是什么？在开发者控制台上有任何错误吗？嘿@ittus谢谢你的帮助。在使用下一个分页按钮（激发displayedPosts（））后，它与模型有一些混淆。一个项目不再显示，请参阅：也许我应该在每次新搜索时重置列表？