Vue.js 和分页

Question

任何指导表示赞赏。在 vue 过滤器中使用分页时，我弄乱了其他过滤器。我已经将一些代码复制到这个小提琴：

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