Vue Filtering and Pagination

Question

How can you render a certain number of array objects based on a selected number say 10 or 15 or 25 in Vue pagination? I have tried rendering 10 items per page and it's working well.

Answer 1

You can create a computed property that slices your array, and use this computed property when iterating the array with v-for :

 var app = new Vue({ el: '#app', data: { items: [ { id: 1, name: 'Foo' }, { id: 2, name: 'Bar' }, { id: 3, name: 'Baz' } ], amountOfItemsShown: 2, }, computed: { slicedItems() { return this.items.slice(0, this.amountOfItemsShown); } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <p>Amount of items shown: <input type="range":min="1":max="3" v-model="amountOfItemsShown"> <strong>{{ amountOfItemsShown }}</strong></p> <div v-for="item in slicedItems":key="item.id"> {{ item.name }} </div> </div>