vue.js vfor 每 5 项添加 bootstrap 行

<div class="row">
   <div>Item 1</div>
   <div>Item 2</div>
   <div>Item 3</div>
   <div>Item 4</div>
   <div>Item 5</div>
</div>
<div class="row">
   <div>Item 6</div>
   <div>Item 7</div>
   <div>Item 8</div>
   <div>Item 9</div>
   <div>Item 10</div>
</div>

 <div class="row">
    <span  v-for="(item, index) in items">
         // do something like this in vue.js style: 
         // if (item % 5 == 0) print "</div><div class='row'>"
         <app-field >{{ item }}</app-field>
    </span>
</div>

<div class="columns" v-for="chunk in productChunks">

    <div class="column is-one-quarter" v-for="product in chunk">
       // stuff
    </div>

</div>

    computed: {
      productChunks(){
          return _.chunk(Object.values(this.products), 4);
      }
    },

import _ from 'lodash'

Vue.js相关问答推荐

使用插槽的VUE 3工作台

保持页面重新加载之间的状态

vue ： 多个样式的类绑定在一个

我如何使用 vuejs 在我的 url 中编码一个令牌

CssSyntaxError 使用 Webpack 4 构建未知单词

在Vue cli项目中，Laravel api app放在哪里以及如何在vue js中调用api？

如何在 vue 路由中导航到 Bootstrap-vue 选项卡中的特定选项卡？

如何使用 vue.js 获取本地 html 文件？

Vue 和 Bootstrap Vue - 动态使用插槽

在 vue.js 中获取当前时间和日期

如何创建 vuetify 工具栏链接下拉菜单？

此 set-cookie 已被阻止，因为它具有 samesite=lax

Vue CLI 3 sass-resources-loader - Options.loaders 未定义

如何让 vuetify 数据表在卡片内时跨越容器的整个宽度？

VueJS 路由 - 使用子路由和 Vuetify 时如何停止多个活动路由(active routes)？

是否有 v-cloak 逆？

Vue v-model 不响应 BS4 单选按钮组

如何使用vue js判断组件本身的数据何时发生变化？

v-bind：class 的 Vue.js 计算(computed)属性

为什么不能在 vue 模板中使用窗口？