How to optimize the v-for rendering (render 1000 users)

Question

i'm rendering list of +1000 users, is there a way for example to show the first 20 users then the second 20 until the end? because it takes some time to render all the users at one time

or render the first 20 users then show the rest i can for example v-for users.splice(0,20), then v-for the rest users.splice(21) is there any simple way to do things

I think you should use a [virtual scroller](https://github.com/Akryum/vue-virtual-scroller) — HMR, Mar 31 '18 at 03:12

score 0 · Answer 1 · answered Mar 31 '18 at 11:25

What you are attempting to do is possible by adding a page variable, that contains information which page the user is currently on and adding a computed property to return the users.

computed: {
   filteredUsers() {
      return this.users.slice(20 * this.page, 20 * (this.page + 1));
   }
}

Then if you use v-for over this array you get the desired functionality. To get the following 20 users you will just need to increment page by one.

How to optimize the v-for rendering (render 1000 users)

1 Answers1