Javascript v-for中数组子集的循环

我正在尝试根据浏览器窗口的大小动态渲染列中的组件对象列表。现在，我有一个计算属性（columns），每当列数发生变化时，它都会调用我的“createColumns”函数。这适用于正确渲染列。我遇到的问题是反应性——因为我正在创建新列表（通过array.slice），所以当我通过项目组件上的UI与项目交互时，项目没有被正确修改

//computed
columns() {
  return this.createColumns(this.section.questions, this.numCols);
}

// method
createColumns(items, numCols) {
  const columns = [];
  for (let i = 0; i < numCols; i++) {
    const start = Math.ceil(i * (items.length / numCols));
    const end = Math.ceil(((i + 1) * items.length) / numCols);
    const colItems = items.slice(start, end);
    columns.push(colItems);
  }
  return columns;
}

而不是

1 4 7
2 5 8
3 6 9

---

这就是我要说的

也许你应该使用CSS列（），它将从上到下，然后从左到右呈现。这将为仅键盘用户保留呈现的HTML语义中的顺序。您可以创建媒体查询以根据视口宽度调整CSS列的数量。唯一的问题是，并非所有的“细胞”高度都不一样。这会更好，谢谢！我在我的物品上设置了一个固定的高度，这样就不会有问题了。有没有一种方法仍然可以将引导的对齐实用程序与CSS列一起使用？行上的“对正”内容不再起作用，因为现在只渲染一列，因为列从上到下，然后从左到右（在浏览器计算出所需的总高度后）渲染，所以“柔体对齐”实用程序将不会对它们起作用。您可以使每个“单元格”（项目）显示为

d-flex

，然后在项目（或项目内容）上应用任何flex实用程序类。在这种情况下，不要使用

或

。

1 2 3
4 5 6
7 8 9

1 4 7
2 5 8
3 6 9