Question

我在VueJS上有一个v-for循环，我希望将循环元素包装在一个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>

实现这一目标的最佳方式是什么？

Answer 1

这似乎是你真正想要在计算中做的事情。我可以看一下计算机的名称，并且非常清楚它正在做什么。

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

Answer 2

您可以使用范围v-for

<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文档：https://vuejs.org/v2/guide/list.html#Range-v-for

Answer 3

您可以通过引用每个项目的索引并从计算索引处的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>

VueJS - 有条不紊地包裹在div中

3 个答案: