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

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>

Am i too late?You can solve this using computed properties:

<div v-for="value in computedObj">{{value}}</div><button @click="limit = null">Show more</button>

Then in data:

data(){  return {    object:[], // your original data    limit: 5 // or any number you wish to limit to  }}

And finally in your computed properties:

computed:{  computedObj(){    return this.limit ? this.object.slice(0,this.limit) : this.object  }}

When your click the button, the limit is cleared and the whole data is shown/returned

you can try this solution to...

<div  class="body-table  div-table" v-for="(item,index) in items"  :key="item.id" v-if="items && items.length > 0 && index <= limitationList">....

and set your limit in data

data() {  return {    limitationList:5  };},

and set a function in you btn

  <button  @click="updateLimitation(limitationList)">    show {{limitationList == 5 ? 'more' : 'less'}}  </button>

and this your methods

updateLimitation(limitationList){  if (this.limitationList == this.items.length) {    this.limitationList = 5  }else{    this.limitationList = this.items.length  }}

i hope useful for you...