如何使用Vue.js渲染拆分組中的列表？

Question

我有一個JSON對象從具有大致這種格式的日期數量可變的服務器返回：

[{"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}] 

我試圖通過數據進行迭代，並得到類似下面的HTML假設有一個輸出數據集中有9個元素要迭代。

基本上，我想輸出數據集到三個對象的組中，計數每個組中的對象，然後爲接下來的三個對象重複。

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

我不知道如何最好的方式在Vue.js模板做到這一點。

Answer 1

您可以將數組拆分爲塊，然後單獨渲染每個塊。

let arrays = []; 
const size = 3; 

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

然後象這樣在它們之間進行迭代：

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

或者你可以用嵌套的元素去沒有分裂：

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

我沒有測試的代碼，但它應該工作:)