Ich baue eine kleine Anwendung in Vuejs 2.0
Ich habe ungefähr 15 iterierende Elemente, die ich begrenzen möchte v-for
für nur 5 Elemente und kann mehr Schaltflächen haben, um die gesamte Liste anzuzeigen. Gibt es Möglichkeiten?
Wie man die Iteration von Elementen in `v-for` einschränkt
Nitish Kumar
Quoc-Anh Nguyen
Sie können diesen Code ausprobieren
<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>
Sie haben nur 5 Elemente im neuen Array.
Update: Winzige Änderung, durch die diese Lösung sowohl mit Arrays als auch mit Objekten funktioniert
<div v-if="showLess">
<div v-for="(value,index) in object">
<template v-if="index <= 5"></template>
</div>
</div>
<div v-else>
<div v-for="value in object"></div>
</div>
<button @click="showLess = false"></button>
-
Wie gesagt, das funktioniert nur auf Arrayswerden Objekte Fehler auslösen.
– Fusseldieb
24. August 2018 um 23:35 Uhr
-
@Fusseldieb Ja .. Deshalb ist es sehr empfehlenswert, Ihre Daten zu speichern als Arrays auch wenn Sie Daten als Objekt erhalten haben. Es wird Ihnen helfen, besser mit Vuejs zu arbeiten.
– kuzey beytar
1. Oktober 2018 um 8:11 Uhr
-
oder Sie können eine Bedingung im Zyklus selbst erstellen
<div v-for="value in (showLess ? array : array.slice(0, 5))></div> <button @click="showLess = false"></button>
– arkadij_ok
27. November 2018 um 6:16 Uhr
-
Es ist eine schlechte Praxis, ein v-if und v-for auf demselben Element zu verwenden – versuchen Sie es zu vermeiden und fügen Sie einen Wrapper mit der v-if-Bedingung hinzu
– YonatanAr
27. Februar 2019 um 13:18 Uhr
-
@unplugged Antwort unten ist die richtige Antwort, das ist schlechte Praxis
– BritishSam
28. Juni 2020 um 16:28 Uhr
nicht angeschlossen
Bin ich zu spät? Sie können dies mit berechneten Eigenschaften lösen:
<div v-for="value in computedObj">{{value}}</div>
<button @click="limit = null">Show more</button>
Dann in Daten:
data(){
return {
object:[], // your original data
limit: 5 // or any number you wish to limit to
}
}
Und schließlich in Ihren berechneten Eigenschaften:
computed:{
computedObj(){
return this.limit ? this.object.slice(0,this.limit) : this.object
}
}
Wenn Sie auf die Schaltfläche klicken, wird das Limit gelöscht und die gesamten Daten werden angezeigt/zurückgegeben
Sie können diese Lösung ausprobieren, um …
<div class="body-table div-table" v-for="(item,index) in items" :key="item.id" v-if="items && items.length > 0 && index <= limitationList">....
und legen Sie Ihr Datenlimit fest
data() {
return {
limitationList:5
};
},
und setze eine Funktion in dir btn
<button @click="updateLimitation(limitationList)">
show {{limitationList == 5 ? 'more' : 'less'}}
</button>
und das sind deine Methoden
updateLimitation(limitationList){
if (this.limitationList == this.items.length) {
this.limitationList = 5
}else{
this.limitationList = this.items.length
}
}
Ich hoffe, nützlich für Sie …
-
Diese Lösung ist nicht gut, da das v-if von vue einen leeren Kommentar für jedes Element hinterlässt, das die Limitprüfung nicht bestanden hat. Sie werden also am Ende viele “” in Ihrem DOM haben.
– PinkiNizza
6. Februar 2018 um 16:48 Uhr
Um dieses Problem zu lösen, können Sie die Limitliste in der berechneten Methode berechnen
so was
<div class="body-table div-table" v-for="(item,index) in filterItems" :key="item.id">
....
<script>
export default {
data() {
return {
items: [],
limitationList:5
};
},
computed: {
filterItems () {
return this.items && this.items.length > 0 && (this.items.length - 1) <= this.limitationList // or any condition u want
}
}
}
</script>
Ich hoffe nützlich.
Dies ist meine Lösung, überprüfen Sie, ob Sie in Ihrer Rendering-Liste den Stammabschnitt in der Iteration ausblenden müssen <li>
.
<ul role="list">
<li v-for="(actor,index) in this.cast" :key="actor.id" :class="{'your-hidden-class': index>5}">
<div v-if="index <= 5">
<img v-if="actor.profile_path" :src="'https://image.tmdb.org/t/p/original' + actor.profile_path" alt="" />
<img v-else src="/images/image-not-found.png" alt="" />
<div>
<div>
<h3>{{ actor.original_name }}</h3>
<p>{{ actor.character }}</p>
</div>
</div>
</div>
</li>
</ul>
Artur Müller Romanow
Das ist was computed
wurde gemacht für (ich benutze script setup
):
const paginatedList = computed(() => {
// for arrays
return yourArray.slice(0,5)
// for objects/proxies such as reactive, refs, other computed
// return yourObject.value.slice(0,5)
})
Rendern Sie es in a v-for
Schleife:
<div v-for="item in paginatedList">
<p>{{ item }}</p>
</div
Zeig uns was du probiert hast…
– Muthu Kumaran
7. Oktober 2017 um 16:00 Uhr
Mögliches Duplikat von VueJs, wie man eine Paginierung mit Limiter und Range macht..?
– Roy J
7. Oktober 2017 um 16:18 Uhr