Sometimes, we want to limit iteration of elements in v-for with Vue.js.

In this article, we’ll look at how to limit iteration of elements in v-for with Vue.js.

How to limit iteration of elements in v-for with Vue.js?

To limit iteration of elements in v-for with Vue.js, we can use the JavaScript array slice method.

For instance, we write

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

to call array.slice with indexes 0 and 5 to return an array with array elements from index 0 to 4.

And then we loop through the returned array with v-for.

How to limit iteration of elements in v-for with Vue.js?

To limit iteration of elements in v-for with Vue.js, we can use the JavaScript array slice method.