Question

我刚开始使用Vue并遇到了一个基本问题。在此之后 tutorial，我将以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);
  },
...

然后将模板绑定到displayPosts：

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

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

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

非常感谢您的帮助！

Answer 1

您可以更改displayedPosts：

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

vuejs将过滤器添加到由json响应生成的分页列表中

1 个答案: