Vue.js 并分页

Question

感谢任何指导。在 vue 过滤器中使用分页时，我弄乱了其他过滤器。我已将一些代码复制到此 fiddle:

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

添加分页作为过滤器后，在 HTML 部分的第 23 行，它禁用了搜索以及通过单击列标题进行排序的功能。

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

如果删除 fiddle 中的分页过滤器，您将看到可以排序和搜索...我已将每个值带到控制台 - 看起来一切都很好，无论有没有分页过滤器，因此我不知道如何解决这个问题或者我可能错过了什么。

感谢您的任何见解。

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

Vue.js 并分页

Vue.js and paginate

vue.js