開始点と終了点が異なる配列を反復する

Question

開始点と終了点が異なるjson配列をどのように反復処理しますか？

私はV-を試してみた

... 15-19、10-14、5-9、私は 0-4でリストを反復処理したい

に... 20の項目のリストを言います別のオプションでの構文を使用していますが、うまく動作しません。

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

Iユーザーに最初のループ内のユーザーにユーザー[0] [4]、 ユーザーが[5]、[9]第二ループ内などをしたい...

Iを反復したいいけません一度にループ全体。私は分割されたセクションでそれを刺す必要があります。

Answer 1

あなたはテンプレートの配列スライスができます：ここで

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

は例です：また

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>

---

、あなたは、構造体への計算されたプロパティを作成することができますあなたのデータをより簡単に表示することができます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

使用範囲とスライスV-ため。

Vuejsは範囲でv-forをサポートします。

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> 

注次のコードでそれはない完全なリストは5