如何在 v-window 内显示固定数量的 v-for 元素答案

【问题标题】：How to display fixed number of elements of v-for inside v-window如何在 v-window 内显示固定数量的 v-for 元素
【发布时间】：2020-08-09 13:34:32
【问题描述】：

我想要实现的是：我有一个父组件，我需要在其中显示 4 项图像+客户名称。我有一个大约 26 个客户的列表（名称和徽标的 url），我一次只需要显示 4 个，并自动生成必要的孩子。

我在尝试为此获得干净的代码时遇到问题，有人可以给我一些关于如何实现这一目标的指示吗？提前致谢！

tldr：如何让 vue 知道它必须在客户端数据迭代 4 次后添加一个新的 v-window-item。

编辑：添加示例

<v-window>
  <v-window-item>
    <div v-for="n in items" :key="`div-${n}`>
      <v-image src="n.url"></v-image> 
      <p>{{n.title}}</p>
    </div>
  </v-window-item>
</v-window>

在这里，我将所有 div 放在一个 v-window-item 中。我需要每 4 个 div 生成 +1 个 v-window-item，所以我当时只显示 4 个。

【问题讨论】：

请分享一下你到目前为止的尝试？
我更新了问题，添加了我在做什么的示例
如果一个数能被 4 整除，你会想要一个条件
相关：stackoverflow.com/questions/46622209/… - “当时显示 4 个”没有任何逻辑？（随机化）

标签： vue.js vuetify.js v-for

【解决方案1】：

你可以这样做：

首先在计算属性中将项目数组分成 4 个块

  data: {
    items: [],
  },
  computed: {
    chunks() {

      let chunk_size = 4
      let items = this.items

      return Array(Math.ceil(items.length / chunk_size))
              .fill()
              .map((_, index) => index * chunk_size)
              .map((begin) => items.slice(begin, begin + chunk_size));
  }

然后像这样迭代：

    <v-window>
      <v-window-item v-for="(item,i) in chunks" :key="i">
        <div v-for="n in item" :key="`div-${n}`>
          <v-image src="n.url"></v-image> 
          <p>{{n.title}}</p>
        </div>
      </v-window-item>
    </v-window>

【讨论】：