javascriptvue.jsvuejs2

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

I'm building a small application in Vuejs 2.0 I'm having approx 15 iterating elements I want to limit the v-for for only 5 elements and can have more buttons to display the whole list. Is there any possibilities?

Solution

  • 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>