Как ограничить итерацию элементов в 'v-for'

Я создаю небольшое приложение в Vuejs 2.0 У меня есть приблизительно 15 итерационных элементов. Я хочу ограничить v-for только 5 элементами и иметь больше кнопок для отображения всего списка. Есть ли возможности?

Ответ 1

Вы можете попробовать этот код

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

У вас будет только 5 элементов в новом массиве.

Обновление: небольшое изменение, которое делает это решение работать как с массивами, так и с объектами

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

Ответ 2

вы можете попробовать это решение для...

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

и установите лимит в данных

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

и установите в вас функцию btn

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

и это ваши методы

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

Я надеюсь, что вам полезно...