Javascript vuejs v-for每隔5项添加引导行

我有一个项目数组，如“项目1”、“项目2”到“项目25”。我希望呈现后的HTML如下所示：

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

<template>
    <div class="col q-gutter-y-xs">
        <div class="row q-gutter-x-xs" v-for="row in rows" :key="row">
          <div class="col slot text-white" v-for="col in columns" :key="col">

          </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                rows: 7,
                columns: 7
            }
        }
    }
</script>

<style>
    .slot {
        background: #444;
        border-radius: 8px;
        border: 1px #2e2d28 solid;
    }
</style>

项目1
项目2
项目3
项目4
项目5
项目6
项目7
项目8
项目9
项目10

在vue.js中，如何正确表达这一点

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

//以vue.js样式执行以下操作：
//如果（项目%5==0）打印“”
{{item}}

您可以尝试以下方法：

  <div class="row" v-for="i in Math.ceil(items.length / 5)">
    <span v-for="item in items.slice((i - 1) * 5, i * 5)">
      {{item}}
    </span>
  </div>

.row{
边框：实心1px#404040；
填充：10px；
}

{{item}}

除了上面我认为很好的示例之外，我还将计算定义为计算属性和方法，以获得更可读的代码。 见：

---

或者你也可以使用

lodash\uu.chunk（）

来做同样的事情，我个人认为这更容易阅读

模板：

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

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

</div>

就我个人而言，我经常在main.js中使用lodash，因此在全球范围内导入lodash：

import _ from 'lodash'

---

记住“

npm安装——保存lodash

”

一个稍微改进的答案，使用

npm安装——保存lodash

<template>
<div class="content">
    <div class="row" v-for="chunk in productChunks">
        <product-thumbnail :product="sp" v-for="sp in chunk" class="col-4"></product-thumbnail>
    </div>
</div>
</template>



import lodash from 'lodash';


export default {
    name: "ProductList",
    components: {
        "product-thumbnail": ProductThumbnail
    },
    data() {
        return {
            sps: [],
            itemsPerRow: 4
        }
    },
    async mounted() {
        let resp = await;
        //call api
        this.sps = results;
    },
    computed: {
        productChunks() {
            return lodash.chunk(Object.values(this.sps), this.itemsPerRow);
        }
    }
}

从“lodash”进口lodash；
导出默认值{
名称：“产品列表”，
组成部分：{
“产品缩略图”：产品缩略图
},
数据（）{
返回{
sps:[]，
项目箭头：4
}
},
异步装入（）{
让我们等待；
//调用api
这是sps=结果；
},
计算：{
productChunks（）{
返回lodash.chunk（Object.values（this.sps）、this.itemsPerRow）；
}
}
}

如果您只是为稍后可能使用

位置：相对

呈现的内容创建占位符/插槽，您可以这样创建它们：

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

<template>
    <div class="col q-gutter-y-xs">
        <div class="row q-gutter-x-xs" v-for="row in rows" :key="row">
          <div class="col slot text-white" v-for="col in columns" :key="col">

          </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                rows: 7,
                columns: 7
            }
        }
    }
</script>

<style>
    .slot {
        background: #444;
        border-radius: 8px;
        border: 1px #2e2d28 solid;
    }
</style>

导出默认值{
数据（）{
返回{
行：7，
栏目：7
}
}
}
.插槽{
背景：#444；
边界半径：8px；
边框：1px#2e28实心；
}

到'Item 25'，因此：

i in Math.ceil（items.length/5）

请参见@Cristi Jora的答案way@CD.. 如何检索

项的实际索引

？我在v-for中有一个基于项索引的v-model。你的解给我指数：0,1,0,1,0。。。而不是0,1,2,3,4。。（注：我将5改为2）我提出了一个问题：这个anwser应该集成到已接受的anwser中！同意/更优雅的解决方案。在我看来，这比公认的答案要好得多，因为它使每个逻辑都远离模板。