I'm facing an issue with my code where I am trying to display Bootstrap cards in rows of three, but the layout is not rendering correctly. It starts with one card, then two, and eventually adds a new column, resulting in some empty spaces with offsets.
Any assistance with Vue or CSS would be greatly appreciated. I believe the solution may involve only printing the div elements with classes row and col when index mod 3 = 0, but I'm uncertain how to implement this using 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
// JavaScript
var prodData = [
...
]
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;
}
})