web-dev-qa-db-fra.com

Comment limiter l'itération des éléments dans `v-for`

Je construis une petite application dans Vuejs 2.0 j'ai environ 15 éléments itératifs. Je veux limiter le v-for à seulement 5 éléments et peut avoir plus de boutons pour afficher la liste complète. Y a-t-il des possibilités?

vue.jsvuejs2
29
Nitish Kumar

Vous pouvez essayer ce 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>

Vous aurez seulement 5 éléments dans le nouveau tableau.

Mise à jour: petit changement qui fait que cette solution fonctionne avec des tableaux et des objets

<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>
87
Anh Nguyen

vous pouvez essayer cette solution pour ...

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

et définir votre limite de données

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

et définir une fonction dans vous btn

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

et cela vos méthodes

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

j'espère utile pour vous ...

7
Davod Aslanifakor

Suis-je trop tard? Vous pouvez résoudre ce problème en utilisant les propriétés calculées:

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

Puis dans vos données:

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

Et enfin dans vos propriétés calculées:

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

Lorsque vous cliquez sur le bouton, la limite est effacée et toutes les données sont affichées/renvoyées.

5
unplugged