如何在Vuetify的v-carousel轮播中实现每页展示不同数量的v-card卡片

问题根因 #

你当前的代码在每一个<v-carousel-item>节点内都完整遍历了整个color数组，所以全部5张卡片会同时渲染在2个轮播项中，和预期的分页展示逻辑不符。

修复方案 #

核心逻辑是把color数组按轮播页的要求分段，第一页取前3个元素，第二页取后2个元素。你可以根据场景选择以下两种实现方式：

方式1：通用可扩展写法（推荐） #

通过配置每页显示数量+方法切割数组，后续如果要加轮播页、调整每页卡片数量只需要修改pageSize配置即可，完整代码如下：

<template>
  <v-flex>
    <v-carousel hide-delimiters style="box-shadow: 0px 0px" prev-icon>
      <v-carousel-item v-for="i in 2" :key="i">
        <v-layout row>
          <v-flex sm4 v-for="j in getPageCards(i)" :key="j" pl-2 pr-2>
            <v-card :color="j">
              <v-card-title primary-title>
                <div>
                  <h3 class="headline mb-0">Card {{i}}-{{j}}</h3>
                  <div> Card text </div>
                </div>
              </v-card-title>
            </v-card>
          </v-flex>
        </v-layout>
      </v-carousel-item>
    </v-carousel>
  </v-flex>
</template>

<script>
export default{
  data(){
    return{
      color: ['red','orange','green','primary','error'],
      // 按轮播顺序配置每页卡片数量
      pageSize: [3, 2]
    }
  },
  methods: {
    getPageCards(pageNum) {
      const pageIndex = pageNum - 1
      const startOffset = this.pageSize.slice(0, pageIndex).reduce((sum, num) => sum + num, 0)
      return this.color.slice(startOffset, startOffset + this.pageSize[pageIndex])
    }
  }
}
</script>

方式2：简单硬编码写法（适合固定2页场景） #

如果你确定后续不会调整轮播页数和每页数量，也可以直接在模板里切割数组，不需要加额外方法，只需要修改卡片遍历的逻辑即可：

<!-- 仅需要替换原代码中v-card外层的v-flex遍历行 -->
<v-flex sm4 v-for="j in i === 1 ? color.slice(0,3) : color.slice(3,5)" :key="j" pl-2 pr-2>

效果验证 #

修改后第一个轮播项会显示红、橙、绿3张卡片，第二个轮播项会显示primary、error2张卡片，符合需求。

内容的提问来源于stack exchange，提问作者Maseeha Tasneem