使用vue.js for loop呈现并跳到下一列

我的物品里有15张记录。我想以这样的方式呈现它们，我的三列应该反映并限制为15个独特的项目。如果它是一列，那么它就不会是一个问题，但在这里它有三列。所以基本上它应该类似于render 5 column，然后跳到下一列并再次渲染5，如此类推。我可以通过创建3V-for循环并进行渲染来实现这一点，但这有点复杂。有什么我可以渲染，停止，渲染的吗

<div id="mylist" class="ui grid" v-for="(item, index) in infox">
    <div class="column">
        <div class="ui link list">
            <a class="item">{{needtorender}}</a>
            <a class="item">{{needtorender}}</a>
            <a class="item">{{needtorender}}</a>
            <a class="item">{{needtorender}}</a>
            <a class="item">{{needtorender}}</a>
        </div>
    </div>
    <div class="column">
        <div class="ui link list">
            <a class="item">{{needtorender}}</a>
            <a class="item">{{needtorender}}</a>
            <a class="item">{{needtorender}}</a>
            <a class="item">{{needtorender}}</a>
            <a class="item">{{needtorender}} >></a>
        </div>
    </div>
    <div class="column">
        <div class="ui link list">
            <a class="item">{{needtorender}}</a>
            <a class="item">{{needtorender}}</a>
            <a class="item">{{needtorender}}</a>
            <a class="item">{{needtorender}}</a>
            <a class="item">{{needtorender}}></a>
        </div>
    </div>
</div>

{{needtorender}}
{{needtorender}}
{{needtorender}}
{{needtorender}}
{{needtorender}}
{{needtorender}}
{{needtorender}}
{{needtorender}}
{{needtorender}}
{{needtorender}}>>
{{needtorender}}
{{needtorender}}
{{needtorender}}
{{needtorender}}
{{needtorender}}>

例如，如果我有6家航空公司。 JetAirways、阿联酋航空公司、汉莎航空公司、瑞士航空公司、法国航空公司、芬兰航空公司。那么它应该是下面的东西

<div id="mylist" class="ui grid" v-for="(item, index) in infox">
    <div class="column">
        <div class="ui link list">
            <a class="item">JetAirways</a>
            <a class="item">Emirates</a>
        </div>
    </div>
    <div class="column">
        <div class="ui link list">
            <a class="item">Lufthansa</a>
            <a class="item">Swiss</a>
        </div>
    </div>
    <div class="column">
        <div class="ui link list">
            <a class="item">Aeroflot</a>
            <a class="item">Finnair</a>
        </div>
    </div>
</div>

捷达航空
酋长国
汉莎航空
瑞士的
浮冰
芬奈尔

---

如果觉得这个问题太容易解决，那么很抱歉。我是vue.js新手

我会计算要在计算属性中呈现的数据，然后在模板中对其进行迭代。

---

这可以通过几种方式实现。我建议使用lodash

difference

和

unique

您可以创建一个具有唯一值的数组，然后过滤不在unique元素数组中的现有元素。

列如何溢出？给定N个数量的项目，预期的行为是什么？项目如何在列之间排序？垂直、水平？@PabloAlbornoz，列的排序方式无关紧要。我并不担心它的展示方式。我只是想找到一个逻辑，我们可以在第一列的5次计数后停止for循环，然后从下一列继续。我还举了一个例子，说明我的航空公司应该如何提供服务。基本上，这个例子就是期望的结果。好吧，那么：你的例子缺少一些边缘情况：如果你的列总是相同的长度，那么当项数不能被3整除时会发生什么？（2，8，11…），列的数量会一样吗？@PabloAlbornoz我的列总是3个，每个列上有5个项目，如果你想知道的话。我的专栏永远不会增加或减少。因此，如果我有15家航空公司，那么它应该在所有三列中呈现一次，每个列有5个项目。@PabloAlbornoz，我的航空公司不会超过15家