[Vuejs]-How can I make pagination client side on vue?

by

1👍

The Vuetify is just a “CSS”, you have to do your pagination logic yourself. Can refer codepen below

https://codepen.io/markcc/pen/vYEmXro?editors=1010

Basically what I updated is changing your looping Items into cloneItems (it get from Computed Properties, so that I can do the pagination logic here).

cloneItems() {
        var clone = JSON.parse(JSON.stringify(this.items));
        var startFrom = (this.pagination.page*this.pagination.rowsPerPage)-this.pagination.rowsPerPage;
        return clone.splice(startFrom, this.pagination.rowsPerPage);
    }
👤markcc

0👍

I see currently you have all of your items inside one single array and then you loop through it to display every item.

There are several ways you could do it. One way is to filter the list through a computed property that is calculated based on the current pagination settings.

computed: {
    filterItems() {
        const start = this.pagination.page * this.pagination.rowsPerPage - this.pagination.rowsPerPage;
        const end = start + this.pagination.rowsPerPage - 1;

        return this.items.filter((item, index) => index >= start && index <= end);
    }
}

And then simply change the v-for loop to:

v-for="(item, i) in filterItems"

👤T. Short

Leave a comment