How to make Vue and Bootstrap 4 show 3 cards per row

Question

I think the title says it all, if you take a look at my fiddle I am trying to loop through products and print bootstrap cards 3 times per row, however I am getting one, then 2, then you can see it adding a new column, which hapens a couple more times then you get a blank space with 2 offset to the right...

So I need some help with vue or my css or both. I think what may need to happen is only print the div with classes of row and col when index mod 3 = 0 but I am not sure how to do that with vue.

HTML

 <div id="app">
  <div class="row">
    <div class="col-md-12">
      <h1 class="text-center">Products</h1>
      <hr />
    </div>
  </div>


  <img v-if="loading" src="https://i.imgur.com/JfPpwOA.gif" />

  <section v-else style="margin-left: 10px;">
    <div v-for="(product, index) in products.slice(0, 15)">
      <!-- if we are 3 cards wide start a new row -->
      <div :class="{'row':(index % 3 === 0)}">
        <div :class="{'col-md-12':(index % 3 === 0)}">
          <div class="card" style="width: 16rem; float:left;">
            <img class="card-img-top" :src="product.thumbnailUrl" alt="card image collar">
            <div class="card-body">
              <h5 class="card-title">Product {{index}}</h5>
              <p class="card-text">Product {{index}} - {{product.title}}</p>
              <button v-on:click="addProductToCart(product)" class="btn btn-primary">Add To Cart</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

JS

var prodData = [
  {
    "albumId": 1,
    "id": 1,
    "title": "accusamus beatae ad facilis cum similique qui sunt",
    "url": "http://placehold.it/600/92c952",
    "thumbnailUrl": "http://placehold.it/150/92c952"
  },
  {
    "albumId": 1,
    "id": 2,
    "title": "reprehenderit est deserunt velit ipsam",
    "url": "http://placehold.it/600/771796",
    "thumbnailUrl": "http://placehold.it/150/771796"
  },
  {
    "albumId": 1,
    "id": 3,
    "title": "officia porro iure quia iusto qui ipsa ut modi",
    "url": "http://placehold.it/600/24f355",
    "thumbnailUrl": "http://placehold.it/150/24f355"
  },
  {
    "albumId": 1,
    "id": 4,
    "title": "culpa odio esse rerum omnis laboriosam voluptate repudiandae",
    "url": "http://placehold.it/600/d32776",
    "thumbnailUrl": "http://placehold.it/150/d32776"
  },
  {
    "albumId": 1,
    "id": 5,
    "title": "natus nisi omnis corporis facere molestiae rerum in",
    "url": "http://placehold.it/600/f66b97",
    "thumbnailUrl": "http://placehold.it/150/f66b97"
  },
  {
    "albumId": 1,
    "id": 6,
    "title": "accusamus ea aliquid et amet sequi nemo",
    "url": "http://placehold.it/600/56a8c2",
    "thumbnailUrl": "http://placehold.it/150/56a8c2"
  },
  {
    "albumId": 1,
    "id": 7,
    "title": "officia delectus consequatur vero aut veniam explicabo molestias",
    "url": "http://placehold.it/600/b0f7cc",
    "thumbnailUrl": "http://placehold.it/150/b0f7cc"
  },
  {
    "albumId": 1,
    "id": 8,
    "title": "aut porro officiis laborum odit ea laudantium corporis",
    "url": "http://placehold.it/600/54176f",
    "thumbnailUrl": "http://placehold.it/150/54176f"
  },
  {
    "albumId": 1,
    "id": 9,
    "title": "qui eius qui autem sed",
    "url": "http://placehold.it/600/51aa97",
    "thumbnailUrl": "http://placehold.it/150/51aa97"
  }
];

new Vue({
  el: "#app",
  data() {
    return {
      loading: false,
      cart: []
    }
  },
  methods: {
    addProductToCart: function(product) {
      this.cart.push(product);
      console.log(this.cart);
    }
  },
  created() {
    this.loading = true;
        this.products = prodData;
    this.loading = false;

  }
})

FIDDLE

Answer 1

Your codes generate an unexpected result like:

<div>
  <div class="row">Your card</div>
  <div class="">Your card</div>
  <div class="">Your card</div>
  <div class="row">Your card</div>
</div>

One alternative solution is change your 1D array to 2D then use nested loop to reach your goal.

Below is the function to convert 1D to 2D array.

get2DArrary: function(arr) {
  let newArr = [];
  while(arr.length) newArr.push(arr.splice(0,3))
  return newArr
}

Below is one sample:

var prodData = [
  {
    "albumId": 1,
    "id": 1,
    "title": "accusamus beatae ad facilis cum similique qui sunt",
    "url": "http://placehold.it/600/92c952",
    "thumbnailUrl": "http://placehold.it/150/92c952"
  },
  {
    "albumId": 1,
    "id": 2,
    "title": "reprehenderit est deserunt velit ipsam",
    "url": "http://placehold.it/600/771796",
    "thumbnailUrl": "http://placehold.it/150/771796"
  },
  {
    "albumId": 1,
    "id": 3,
    "title": "officia porro iure quia iusto qui ipsa ut modi",
    "url": "http://placehold.it/600/24f355",
    "thumbnailUrl": "http://placehold.it/150/24f355"
  },
  {
    "albumId": 1,
    "id": 4,
    "title": "culpa odio esse rerum omnis laboriosam voluptate repudiandae",
    "url": "http://placehold.it/600/d32776",
    "thumbnailUrl": "http://placehold.it/150/d32776"
  },
  {
    "albumId": 1,
    "id": 5,
    "title": "natus nisi omnis corporis facere molestiae rerum in",
    "url": "http://placehold.it/600/f66b97",
    "thumbnailUrl": "http://placehold.it/150/f66b97"
  },
  {
    "albumId": 1,
    "id": 6,
    "title": "accusamus ea aliquid et amet sequi nemo",
    "url": "http://placehold.it/600/56a8c2",
    "thumbnailUrl": "http://placehold.it/150/56a8c2"
  },
  {
    "albumId": 1,
    "id": 7,
    "title": "officia delectus consequatur vero aut veniam explicabo molestias",
    "url": "http://placehold.it/600/b0f7cc",
    "thumbnailUrl": "http://placehold.it/150/b0f7cc"
  },
  {
    "albumId": 1,
    "id": 8,
    "title": "aut porro officiis laborum odit ea laudantium corporis",
    "url": "http://placehold.it/600/54176f",
    "thumbnailUrl": "http://placehold.it/150/54176f"
  },
  {
    "albumId": 1,
    "id": 9,
    "title": "qui eius qui autem sed",
    "url": "http://placehold.it/600/51aa97",
    "thumbnailUrl": "http://placehold.it/150/51aa97"
  }
];
  
new Vue({
  el: "#app",
  data() {
    return {
      loading: false,
      cart: []
    }
  },
  methods: {
    addProductToCart: function(product) {
      this.cart.push(product);
      console.log(this.cart);
    },
    get2DArrary: function(arr) {
      let newArr = [];
      while(arr.length) newArr.push(arr.splice(0,3))
      return newArr
    }
  },
  created() {
    this.loading = true;
		this.products = prodData;
    this.loading = false;
      
  }
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
 <div id="app">
  <div class="row">
    <div class="col-md-12">
      <h1 class="text-center">Products</h1>
      <hr />
    </div>
  </div>

    
  <img v-if="loading" src="https://i.imgur.com/JfPpwOA.gif" />
    
  <section v-else style="margin-left: 10px;">
    <div v-for="(row, rowIndex) in get2DArrary(products.slice(0, 15))" :key="rowIndex" class="row">
    <div v-for="(product, productIndex) in row" :key="productIndex" class="col-md-4">
      <!-- if we are 3 cards wide start a new row -->
        <div>
          <div class="card" style="width: 16rem; float:left;">
            <img class="card-img-top" :src="product.thumbnailUrl" alt="card image collar">
            <div class="card-body">
              <h5 class="card-title">Product {{index}}</h5>
              <p class="card-text">Product {{index}} - {{product.title}}</p>
              <button v-on:click="addProductToCart(product)" class="btn btn-primary">Add To Cart</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

Answer 2

You can simply use Vue v-for to repeat the columns (not the .row)...

The v-for should be on the column. Use .col-md-4 for 3 cards per row. Bootstrap will allow the columns to wrap so you don't need repeating row divs...

https://jsfiddle.net/vbpb4me5/

<div class="row">
    <div class="col-md-4" v-for="(product, index) in products.slice(0, 15)">
          <div class="card h-100">
            <img class="card-img-top" :src="product.thumbnailUrl" alt="card image collar">
            <div class="card-body">
              <h5 class="card-title">Product {{index}}</h5>
              <p class="card-text">Product {{index}} - {{product.title}}</p>
              <button v-on:click="addProductToCart(product)" class="btn btn-primary">Add To Cart</button>
            </div>
          </div>
     </div>
 </div>

This creates a proper grid structure (row>col). Also, note that row should be placed in container or container-fluid to prevent the horizontal scrollbar.

Codeply demo

---

Related: Vue three columns of checkboxes in Bootstrap 4