javascript - 使用 VueJS 和 Skeleton CSS 在 3 个项目迭代后创建新行

Question

每次我对数组的 3 项以上进行 v-for 时，我都会尝试创建一行。

我也在使用 Skeleton CSS。现在，只有 3 个项目的结构如下所示：

<div class="row">
    <div class="one-third column" v-for="item in items">
        <custom-component item="item"></custom-component>
    </div>
</div>

现在，我意识到我应该在行元素上而不是在第一列上执行 v-for，但我应该如何迭代？使用v-if="index % 3 === 0"？这只是为了验证我们是否在第 3 次迭代中。

有任何想法吗？

谢谢。

标签： javascriptvue.js

Answer 1

你可以做这样的事情；用于Math.ceil(items.length / 3)计算保存items, 循环遍历行所需的行数，对于每一行循环遍历该行的项目，即items.slice(3 * (rowIdx - 1), 3 * rowIdx).

<div class="row" v-for="rowIdx in Math.ceil(items.length / 3)">
    <div class="one-third column" v-for="item in items.slice(3 * (rowIdx - 1), 3 * rowIdx)">
        <custom-component :item="item"></custom-component>
    </div>
</div>