如何使用v-for循环在Vue.js中遍历列

Question

我正在尝试通过v-for循环列出许多特别优惠。我有一个带有列的网格设置，每列显示3列。目前，它仅显示前3个项目，因为我不确定如何重构代码以在3个项目之后创建另一组列。

如何让v-for循环在每个第三个项目之后创建另一组列？

下图显示了带有5个特价商品的标记外观。如您所见，它们全部显示在一行中。

非常感谢

    <div class="columns">
        <div v-for="s in specials" class="column is-one-third">
            <div class="card">
                <div class="card-content">
                    {{s.specialDetail}}
                </div>
            </div>
        </div>
    </div>

Answer 1

好像您正在使用Bulma CSS。

问题：

布尔玛列默认情况下不会自动换行。

解决方案：

将类is-multiline添加到您的columns容器中，它应该自动包装您的列。

Bulma Reference

    <div class="columns is-multiline">
        <div v-for="s in specials" class="column is-one-third">
            <div class="card">
                <div class="card-content">
                    {{s.specialDetail}}
                </div>
            </div>
        </div>
    </div>