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

Question

每次我对数组的 3 个以上项目执行 v- 时，我都试图创建一行。

我也在使用骨架 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 次迭代。

有任何想法吗？

谢谢。

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>