VueJS - 有条件地包装在 div 内

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

您可以使用范围 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 2

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

VueJS - 有条件地包装在 div 内

VueJS - Conditionally wrap inside a div

javascript

vue.js

vue-component

vuejs2