Vue v-for迭代时如何一次取两个元素，实现轮播Slide双卡片布局？

核心思路是先把dealData.Conditions数组按每2个元素一组拆分，再遍历分组后的数组渲染轮播滑块，每个滑块内渲染组内的两个不同卡片。

步骤1：添加计算属性拆分数据 #

在组件的computed选项里定义分组后的数组：

computed: {
  groupedConditions() {
    const groups = [];
    // 每2个元素分一组
    for (let i = 0; i < this.dealData.Conditions.length; i += 2) {
      groups.push(this.dealData.Conditions.slice(i, i + 2));
    }
    return groups;
  }
}

或者用更简洁的reduce写法：

computed: {
  groupedConditions() {
    return this.dealData.Conditions.reduce((acc, curr, index) => {
      const groupIndex = Math.floor(index / 2);
      if (!acc[groupIndex]) {
        acc[groupIndex] = [];
      }
      acc[groupIndex].push(curr);
      return acc;
    }, []);
  }
}

步骤2：渲染轮播滑块和卡片 #

在模板里遍历分组后的数组，每个组对应一个q-carousel-slide，滑块内遍历组内元素渲染卡片：

<q-carousel>
  <q-carousel-slide v-for="(group, index) in groupedConditions" :key="index">
    <div class="row">
      <div class="col-6" v-for="(condition, idx) in group" :key="idx">
        <ConditionCardComponent :condition="condition" />
      </div>
    </div>
  </q-carousel-slide>
</q-carousel>

如果dealData.Conditions长度为奇数，最后一个滑块只会显示一个卡片；若需要补位空卡片，可以在分组逻辑里判断组长度，不足2时添加占位对象。

内容的提问来源于stack exchange，提问作者Reza Kajbaf