Vue.js和paginate

Question

任何指导赞赏。在vue过滤器中使用paginate时，我搞乱了其他过滤器。我抄一些代码到这个小提琴：

https://jsfiddle.net/ashleywnj/kbr0obsv/2/

随着PAGINATE加入过滤器，HTML中的剖面线23，它禁用搜索，并通过单击列标题进行排序的能力。

<tr v-for="item in items | filterBy searchText | orderBy sortparam order |  paginate"> 

如果删除了小提琴内PAGINATE过滤器，你会看到，你可以进行排序和搜索......我带来了各自的价值控制台 - 它看起来像什么都好都带或不带过滤器PAGINATE ，因此我无法弄清楚如何解决这个问题或者我可能错过了什么。

感谢您的任何见解。

Answer 1

问题是，在您的paginate过滤器中，您使用的是this.items，其中包含列表中的所有项目，而与其他过滤器无关。传递给过滤器的参数list仅包含已过滤和已排序的值，并且是要分页的内容。所以你的过滤器应该是这样的：

paginate: function(list) { 

     this.resultCount = list.length; 

     if (this.currentPage >= this.totalPages) { 
      this.currentPage = Math.max(0, this.totalPages - 1); 
     } 

     var index = this.currentPage * this.itemsPerPage; 

     return list.slice(index, index + this.itemsPerPage); 
    }