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

Question

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?

Answer 1

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>

Answer 2

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

Answer 3

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

Answer 4

This is what computed was made for (I'm using script setup):

const paginatedList = computed(() => {
    // for arrays
    return yourArray.slice(0,5)

    // for objects/proxies such as reactive, refs, other computed
    // return yourObject.value.slice(0,5)
})

render it in a v-for loop:

<div v-for="item in paginatedList">
    <p>{{ item }}</p>
</div

Answer 5

for resolve that problem u can computed limit list in computed method

like this

<div  class="body-table  div-table" v-for="(item,index) in filterItems"  :key="item.id">
....

<script>

export default {
  data() {
     return {
       items: [],
       limitationList:5
    };
  },
  computed: {
    filterItems () {
      return this.items && this.items.length > 0 && (this.items.length - 1) <= this.limitationList  // or any condition u want 
    }
  }
}

</script>

I hope useful.

Answer 6

This is my solution, check that if your rendering list you must hide the root section in the iteration <li>.

 <ul role="list">
     <li v-for="(actor,index) in this.cast" :key="actor.id" :class="{'your-hidden-class': index>5}">
       <div v-if="index <= 5">
         <img v-if="actor.profile_path" :src="'https://image.tmdb.org/t/p/original' + actor.profile_path" alt="" />
         <img v-else src="/images/image-not-found.png" alt="" />
         <div>
           <div>
             <h3>{{ actor.original_name }}</h3>
             <p>{{ actor.character }}</p>
           </div>
         </div>
       </div>
     </li>
 </ul>

Answer 7

{{index}}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="(contact, index) in allContacts" v-if="index < limitNumber" id="contacts">
  <p>{{index}}</p>
  </div>
  </div>
  <script>
        new Vue({
        el: "#app",
        data:{
      filterId:'10',
      limitNumber:10,
      allContacts:[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},],
    },
    });
    </script>