css - 如何让 Vue 和 Bootstrap 4 每行显示 3 张卡片

Question

我认为标题说明了一切，如果您看一下我的 fiddle ，我正在尝试循环遍历产品并每行打印 3 次 Bootstrap 卡，但是我先得到一个，然后是 2 个，然后您可以看到它添加了一个新的列，它发生了几次，然后你得到一个空白，右边有 2 个偏移量......

所以我需要一些关于 vue 或我的 css 或两者的帮助。我认为可能需要发生的只是打印 div类 row和 col什么时候index mod 3 = 0但我不确定如何使用 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

您可以简单地使用 Vue v-for 来重复列(不是 .row)...

v-for 应该在列上。每行 3 张卡片使用 .col-md-4。 Bootstrap 将允许列换行，因此您不需要重复 row div...

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>

这会创建一个 proper grid structure (row>col) .另外，请注意 row 应放在 container 或 container-fluid 中以防止水平滚动条。

Codeply demo

---

相关:Vue three columns of checkboxes in Bootstrap 4