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

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

如果您只是为稍后可能会使用position: relative 呈现的内容创建占位符/插槽，则可以这样创建它们：

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

Answer 2

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

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

Answer 3

稍微改进的答案，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);
        }
    }
}

Answer 4

或者你也可以使用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);
      }
    },

我个人在 main.js 中经常使用 lodash 全局导入它：

import _ from 'lodash'

记得要'npm install --save lodash'

Answer 5

你可以试试这个：

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