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つの要素

基本的には、データセットを3つのオブジェクトのグループに分け、各グループのオブジェクトを数えてから、次の3つを繰り返します。

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

私は、コードをテストしていませんが、それは動作するはずです:)