vue.js - props - Cómo limitar la iteración de elementos en `v-for`

vue props

Question

Estoy creando una pequeña aplicación en Vuejs 2.0 . Tengo aproximadamente 15 elementos iterativos. Quiero limitar el v-for para solo 5 elementos y puedo tener más botones para mostrar la lista completa. ¿Hay posibilidades?

Answer 1

Puedes probar esta solución para ...

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

y establece tu límite en datos

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

y establece una función en ti btn

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

y este tus métodos

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

Espero te sea útil ...

Answer 2

Puedes probar este código

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

Solo tendrás 5 elementos en la nueva matriz.

Actualización: Cambios minúsculos que hacen que esta solución funcione con matrices y objetos

<div v-if="showLess">
<div v-for="(value,index) in object" v-if="index <= 5"></div>
</div>
<div v-else>
<div v-for="value in object"></div>
</div>
<button @click="showLess = false"></button>

Answer 3

Soy demasiado tarde Puedes resolver esto usando propiedades computadas:

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

Luego en sus datos:

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

Y finalmente en sus propiedades computadas:

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

Cuando hace clic en el botón, se borra el límite y se muestran / devuelven todos los datos.