【发布时间】：2018-10-11 16:31:09
【问题描述】：
我认为标题说明了一切，如果您看一下我的小提琴，我正在尝试遍历产品并每行打印 3 次引导卡，但是我得到一个，然后是 2，然后您可以看到它添加一个新的列，它发生了几次，然后你会得到一个向右偏移 2 的空白空间......
所以我需要一些关于 vue 或我的 css 或两者的帮助。我认为可能需要发生的只是在index mod 3 = 0 时打印div 和row 和col 类，但我不知道如何用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;
}
})
【问题讨论】：
标签： css twitter-bootstrap vue.js vuejs2 bootstrap-4