Array mit verschiedenen Start- und Endpunkten Iterieren

Question

Wie iteriert man über ein JSON-Array mit unterschiedlichem Start- und Endpunkt.

z.B. sagt eine Liste von 20 Artikeln ..

ich die Liste in 0-4, 5-9, 10-14, 15-19 ...

Ich habe versucht, den v- iterieren will für Syntax mit verschiedenen Optionen, aber kann es nicht funktionieren.

<tr v-for="(user, index) in json.users"> 

Ich möchte Benutzer [0] an Benutzer [4] in der ersten Schleife, dann Benutzer [5] an Benutzer [9] in der zweiten Schleife etc ...

Ich möchte nicht die iterieren ganze Schleife auf einmal. Ich muss es in geteilte Sektionen teilen.

Answer 1

Sie könnten das Array in der Vorlage schneiden:

<div v-for="item in items.slice(0, 4)> 
    {{ item }} 
</div> 

Hier ist ein Beispiel:

new Vue({ 
 
    el: '#app', 
 
    data() { 
 
    return { 
 
     items: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25] 
 
    } 
 
    } 
 
})

ul { border: 1px goldenrod solid; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script> 
 
<div id="app"> 
 
    <ul v-for="i in 5"> 
 
    <li v-for="item in items.slice((i-1)*5, (i-1)*5+5)"> 
 
     {{ item }} 
 
    </li> 
 
    </ul> 
 
</div>

---

Alternativ können Sie eine berechnete Eigenschaft Struktur erstellen Ihre Daten auf eine Weise, die einfacher zu zeigen wäre y:

new Vue({ 
 
    el: '#app', 
 
    data() { 
 
    return { 
 
     items: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25] 
 
    } 
 
    }, 
 
    computed: { 
 
    sections() { 
 
     let sections = [], size = 5; 
 
     let items = [...this.items]; 
 

 
     while (items.length > 0) 
 
     sections.push(items.splice(0, size)); 
 
     
 
     return sections; 
 
    } 
 
    }  
 
})

ul { border: 1px goldenrod solid; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script> 
 
<div id="app"> 
 
    <ul v-for="items in sections"> 
 
    <li v-for="item in items"> 
 
     {{ item }} 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

Verwenden V-für-Bereich und in Scheiben schneiden.

Vuejs Unterstützung v-für mit einer Reichweite.

https://vuejs.org/v2/guide/list.html#v-for-with-a-Range

<div v-for="n in (items.length/5)"> 
    <div v-for="item in items.slice(n*5, n*5 + 5)> 
    {{ item }} 
    </div> 
</div> 

Beachten Sie, dass die sie nicht vollständig folgenden Code, und Sie müssen es beheben, wenn die Liste nicht ein Vielfaches von 5.