VueJS - 有條件地包裝在一個div

Question

我有一個v-for循環VueJS，我想循環元素在兩個組中的一個div內。

例如：

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

什麼會實現，最好的方法是什麼？通過在所計算的從items陣列引用的每個項目的索引和獲取項目https://vuejs.org/v2/guide/list.html#Range-v-for

Answer 1

可以實現這一點：

Answer 2

可以使用範圍v型爲

<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文檔index：

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