How to make friends pagination and filtering?

Question

Vue.js

There is a pagination method:

getPages() {
            let elemsOnPage = 5;
            if (elemsOnPage !== 0) {
                let pagesArr = [];
                let pageNum = Math.ceil(this.tableList.length / elemsOnPage);

                for (let j = 0; j < pageNum; j++) {
                    this.pageNum.push(j);
                }

                for (let i = 0; i < pageNum; i++) {
                    pagesArr.push(this.tableList.slice(i * elemsOnPage, (i + 1) * elemsOnPage));
                }
                this.filteredPages = cloneDeep(pagesArr);
            }
        },

In the table I output it like this:

<tr v-for="tableItem in filteredPages[activePage]" :key="tableItem.id"></tr>

But there is also computed, which filters:

filteredTableList() {
            return this.tableList
                .filter(el => {
                    if (!this.commitModelForSort) {
                        return true;
                    }
                    return el.commit === this.commitModelForSort;
                })
                .filter(el => {
                    if (!this.rotationModelForSort) {
                        return true;
                    }
                    return el.rotationName === this.rotationModelForSort;
                })
                .filter(el => {
                    if (!this.roleModelForSort) {
                        return true;
                    }
                    return el.role === this.roleModelForSort;
                });
        }

How to combine pagination with filtering?

Answer 1

Replace getPageseverything this.tableListwith this.filteredTableList. What's the problem?)