如何使用 v-for 循环遍历具有 Vue.js 的列

Question

我正在尝试使用 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>

Answer 1

您似乎在使用 Bulma CSS。

问题：

Bulma 列默认不换行。

解法：

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

如何使用 v-for 循环遍历具有 Vue.js 的列

How can I use v-for loop to iterate through columns with Vue.js

javascript

sails.js

vue.js

bulma