如何使用 v-for 循环使用 Vue.js 遍历列答案

【问题标题】：How can I use v-for loop to iterate through columns with Vue.js如何使用 v-for 循环使用 Vue.js 遍历列
【发布时间】：2019-08-15 06:40:11
【问题描述】：

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

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

下图显示了带有 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>

【问题讨论】：

标签： javascript vue.js sails.js bulma

【解决方案1】：

看起来您正在使用 Bulma CSS。

问题：

Bulma 列默认不会换行。

解决方案：

将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>

【讨论】：

非常感谢！不敢相信我错过了。