26 votos

Cómo limitar la iteración de elementos en `v-for`

Estoy construyendo una pequeña aplicación en Vuejs 2.0 Tengo aproximadamente 15 elementos de iteración Quiero limitar el v-for para sólo 5 elementos y puede tener más botones para mostrar toda la lista. ¿Hay alguna posibilidad?

85voto

imcvampire Puntos 1878

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

Sólo tendrás 5 elementos en el nuevo Array.

Actualización: Pequeño cambio que hace que esta solución funcione tanto con matrices como con 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>

7voto

Davod Aslanifakor Puntos 408

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 establecer su límite en los datos

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

y establecer una función en tu btn

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

y esto sus métodos

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

Espero que le sea útil...

2voto

unplugged Puntos 107

¿Llego demasiado tarde? Puedes resolverlo utilizando las propiedades computadas:

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

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

Al hacer clic en el botón, se borra el límite y se muestran/recuperan todos los datos

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X