How to limit iteration of elements in `v-for`
vue.jsVuejs2vue.js Problem Overview
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?
vue.js Solutions
Solution 1 - vue.js
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>
Solution 2 - vue.js
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
Solution 3 - vue.js
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...
Solution 4 - vue.js
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.
Solution 5 - vue.js
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>