How to limit iteration of elements in `v-for`

by

You can try this code

<div v-if="showLess">
    <div v-for="value in array.slice(0, 5)"></div>
</div> 
<div v-else> 
    <div v-for="value in array"></div>
</div> 
<button @click="showLess = false"></button>

You will only have 5 elements in the new array.

Update:
Tiny change that makes this solution work with both arrays and objects

<div v-if="showLess">
  <div v-for="(value,index) in object">
    <template v-if="index <= 5"></template>
  </div>
</div> 
<div v-else> 
  <div v-for="value in object"></div>
</div> 
<button @click="showLess = false"></button>

More Related Contents:

  1. Use arrow function in vue computed does not work
  2. How to add external JS scripts to VueJS Components?
  3. How to use .env variables in Nuxt 2 or 3?
  4. Vue 2 – Mutating props vue-warn
  5. Vuejs Error: The client-side rendered virtual DOM tree is not matching server-rendered
  6. VueJS: why is “this” undefined?
  7. Make VueJS and jQuery play nice
  8. VueJs 2.0 emit event from grand child to his grand parent component
  9. Vuex state on page refresh
  10. Can I pass parameters in computed properties in Vue.Js
  11. How to watch store values from vuex?
  12. Vue – Deep watching an array of objects and calculating the change?
  13. How to call function on child component on parent events
  14. Passing props dynamically to dynamic component in VueJS
  15. Vue JS: Difference of data() { return {} } vs data:() => ({ })
  16. Vuejs typescript this.$refs..value does not exist
  17. How to install jQuery into Nuxt.js?
  18. Access vue instance/data inside filter method
  19. Parentheses while calling a method in Vue
  20. Vue template or render function not defined yet I am using neither?
  21. Global data with VueJs 2
  22. Passing props with programmatic navigation Vue.js
  23. How to set a component non-reactive data in Vue 2?
  24. Vue.js – update router view
  25. Importing javascript file for use within vue component
  26. Detect Back Button in Navigation Guards of Vue-Router
  27. When should I use Vuex?
  28. VueJS conditionally add an attribute for an element
  29. Vue.js – Add class to clicked button
  30. What’s the correct way to pass props as initial data in Vue.js 2?

Leave a Comment