VueJS - div内の条件付きラップ

Question

私はVueJSにv-forループを持っています。そして、div内のループ要素を2つのグループにまとめたいと思います。例えば

：

<div class="xpto" v-for="item in items"> //this div should wrap a maximum of two components per time 
    <component :item="item"></component> 
</div> 

それを達成するための最良の方法だろうか？

Answer 1

あなたはこれを達成することができます計算でitems配列から項目を各項目のインデックスを参照して取得することにより、インデックス：

<div 
    class="xpto" 
    v-for="n, i in items.length" 
    v-if="i < items.length/2" 
> 
    <component 
    v-for="m, j in 2" 
    v-if="items[i*2+j]" 
    :item="items[i*2+j]" 
    ></component> 
</div> 

Answer 2

あなたは

<div class="xpto" v-for="n in 2"> //this div should wrap a 
    maximum of two components per time 
    <component :item="items[n-1]"></component> 
</div> 

Vue.jsドキュメント用のVレンジを使用することができます：https://vuejs.org/v2/guide/list.html#Range-v-forは

Answer 3

これは、実際に計算したいと思うようです。私は計算された名前を見ることができ、それが何をしているかについてかなり良い考えを持っています。

computed:{ 
    itemPairs(){ 
    let p = [], copy = [...this.items] 
    while(copy.length > 0) 
     p.push(copy.splice(0, 2)) 
    return p 
    } 
} 

テンプレート

<div v-for="pair in itemPairs" :key="pair" class="xpto"> 
    <component v-for="item in pair" 
      :item="item" 
      :key="item"> 
    </component> 
</div> 

Example。