Vue.js和paginate

Question

任何指导意见。在vue过滤器中使用paginate时，我搞砸了我的其他过滤器。我已将一些代码复制到这个小提琴中：

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

将分页添加为过滤器，在HTML部分的第23行，它会通过单击列标题禁用搜索和排序功能。

<tr v-for="item in items | filterBy searchText | orderBy sortparam order |     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);
    }