Wie richte ich Listen in Split-Gruppen mit Vue.js auf?

Question

Ich habe ein JSON-Objekt vom Server zurückgegeben, die eine variable Menge an Datum etwa dieses Format in hat:

[{"data":{"level":1,"sub_level":1,"value": 10}, 
{"data":{"level":1,"sub_level":2,"value": 23}, 
{"data":{"level":1,"sub_level":3,"value": 3}, 
{"data":{"level":2,"sub_level":1,"value": 55}, 
{"data":{"level":2,"sub_level":2,"value": 52}] 

Ich versuche, durch die Daten zu durchlaufen und eine Ausgabe ähnlich die folgenden HTML erhält unter der Annahme gab es Neun Elemente im Datensatz, die durchlaufen werden sollen.

Grundsätzlich möchte ich das Dataset in Gruppen von drei Objekten ausgeben, die Objekte in jeder Gruppe zählen und dann für die nächsten drei wiederholen.

<div> 
    <span>1</span> 
    <ul> 
    <li>1 item.value</li> 
    <li>2 item.value</li> 
    <li>3 item.value</li> 
    </ul> 
</div> 
<div> 
    <span>2</span> 
    <ul> 
    <li>1 item.value</li> 
    <li>2 item.value</li> 
    <li>3 item.value</li> 
    </ul> 
</div> 
<div> 
    <span>3</span> 
    <ul> 
    <li>1 item.value</li> 
    <li>2 item.value</li> 
    <li>3 item.value</li> 
    </ul> 
</div> 

Ich bin nicht sicher, wie der beste Weg, dies in den Vue.js Vorlagen zu tun.

Answer 1

Sie können das Array in Blöcke aufteilen und dann jeden Block einzeln rendern.

let arrays = []; 
const size = 3; 

while (yourArray.length > 0) 
    arrays.push(yourArray.splice(0, size)); 

Dann zwischen ihnen durchlaufen wie so:

<div v-for="item in arrays[0]"> 
    <span>1</span> 
    <ul> 
    <li>1 item.value</li> 
    <li>2 item.value</li> 
    <li>3 item.value</li> 
    </ul> 
</div> 
<div v-for="item in arrays[1]"> 
<span>2</span> 
    <ul> 
    <li>1 item.value</li> 
    <li>2 item.value</li> 
    <li>3 item.value</li> 
    </ul> 
</div> 

Oder Sie können ohne die Spaltung mit verschachtelten Elementen gehen:

<div v-for="i in 3"> 
    <span>{{ i + 1 }}</span> 
    <div> 
    <ul> 
     <li v-for="j in 3">{{ j + 1 }} yourArray[i+j].value</li> 
    </ul> 
    </div> 
</div> 

ich den Code nicht getestet, aber es sollte funktionieren :)