Как заставить Vue и Bootstrap 4 показывать по 3 карты в ряду

Question

Я думаю, что название говорит само за себя, если вы посмотрите на мою скрипку, я пытаюсь перебрать товары и напечатать карточки начальной загрузки 3 раза в строке, однако я получаю одну, затем 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

Ваши коды дают неожиданный результат, например:

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

Одним из альтернативных решений является изменение массива 1D на 2D, а затем использование вложенного цикла для достижения цели.

Ниже приведена функция для преобразования 1D в 2D массив.

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

Ниже приведен один образец:

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

Вы можете просто использовать Vue v-for для повторения столбцов (не .row) ...

v-for должно быть в столбце. Используйте .col-md-4 для 3 карт в ряду. Bootstrap позволит обернуть столбцы, поэтому вам не нужно повторять 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>

Это создает правильную структуру сетки (строка> столбец) . Также обратите внимание, что row следует поместить в container или container-fluid, чтобы предотвратить горизонтальную полосу прокрутки.

Кодовая демонстрация

---

Похожие: Vue три столбца флажков в Bootstrap 4