web-dev-qa-db-fra.com

vuejs v-for add bootstrap ligne tous les 5 éléments

J'ai une gamme d'articles comme "Article 1", "Article 2" jusqu'à "Article 25". Je veux que le HTML après le rendu ressemble à ceci:

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

Quelle est la bonne façon d'exprimer cela dans 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

Vous pouvez essayer ceci:

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

Voir un exemple de travail:

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

En plus de l'exemple ci-dessus qui me semble correct, je définirais les calculs comme des propriétés calculées et des méthodes pour un code plus lisible. Voir JSFiddle :

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

Ou vous pouvez faire la même chose en utilisant lodash _.chunk(), que personnellement je trouve plus lisible.

Modèle:

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

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

</div>

Ensuite

    computed: {
      productChunks(){
          return _.chunk(Object.values(this.products), 4);
      }
    },

Personnellement, j'importe globalement lodash car je l'utilise si souvent, dans main.js:

import _ from 'lodash'

Se souvenir de 'npm install --save lodash '

11
Joel

Une réponse un peu améliorée, avec 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