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.
