vuejs v-for每5个项目添加一个bootstrap行

Question

我有一系列项目,如'项目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>

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

Answer 1

你可以试试这个:

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

查看一个工作示例:

new Vue({
  el: '#demo',
  data: {
    items: [
      'item 1',
      'item 2',
      'item 3',
      'item 4',
      'item 5',
      'item 6',
      'item 7',
      'item 8',
      'item 9',
      'item 10',
      'item 11',
      'item 12',
      'item 13',
      'item 14',
      'item 15',
      'item 16',
      'item 17',
      'item 18',
      'item 19',
      'item 20',
      'item 21',
      'item 22',
      'item 23',
      'item 24',
      'item 25'
    ]
  }
})

.row {
  border: solid 1px #404040;
  padding: 10px;
}

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="demo">
  <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>
</div>

Answer 2

除了上面我认为很好的例子之外,我还将计算定义为计算属性和方法,以获得更易读的代码.看JSFiddle:

 computed:{
    rowCount() {     
       return Math.ceil(this.items.length / this.itemsPerRow);
    }
 },

Answer 3

或者你可以使用相同的lodash _.chunk(),我个人觉得更具可读性.

模板:

<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);
      }
    },

我个人在全球范围内导入lodash,因为我经常在main.js中使用它:

import _ from 'lodash'

记得' npm install --save lodash'

Answer 4

答案有所改善，使用npm install --save 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);
        }
    }
}