小编Dev*_*yde的帖子

我认为标题说明了一切,如果你看看我的小提琴,我试图循环产品并每行打印自助卡3次,但是我得到一个,然后是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 …