Vuejs v-for добавить строку начальной загрузки каждые 5 элементов

У меня есть массив элементов, таких как "Item 1", "Item 2" до "Item 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>

Ответ 1

Или вы можете сделать то же самое, используя 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"

Ответ 2

Вы можете попробовать следующее:

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

Ответ 3

В дополнение к приведенному выше примеру, который я считаю вполне подходящим, я бы определил вычисления как вычисляемые свойства и методы для более удобочитаемого кода. Смотрите JSFiddle:

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

Ответ 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);
        }
    }
}

Ответ 5

Я просто поставлю здесь решение в последней версии Bulma. Модификатор is-multiline делает здесь свое дело.

<div class="columns is-multiline">
    <div class="column is-one-third" v-for="customer in customers">
      {{ customer.name }}
    </div>
</div>

источник:https://forum.vuejs.org/t/v-for-with-css-responsive-grid/7164/4