Я создаю небольшое приложение в Vuejs 2.0
У меня есть приблизительно 15 итерационных элементов. Я хочу ограничить v-for
только 5 элементами и иметь больше кнопок для отображения всего списка. Есть ли возможности?
Как ограничить итерацию элементов в 'v-for'
Ответ 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
}
}
Я надеюсь, что вам полезно...