web-dev-qa-db-ja.com

vuejs v-for add bootstrap= 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>

これを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>
javascripttwitter-bootstrapvue.js
21
herrjeh42

これを試すことができます：

  <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>
44
CD..

私が上手く思うと思う上記の例に加えて、計算をより読みやすいコードの計算されたプロパティとメソッドとして定義します。 JSFiddle を参照してください：

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

または、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 '

11
Joel

少し改善された答え、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);
        }
    }
}
4
javed