[Vuejs]-How do I display multiple cards of the data i fetched in vue?

by

0👍

You have to put your for loop on the b-card-group component to at first specify the rows with at most 4 cards.
Then you have to put another for loop on the b-card component to print 4 cards for each card group.

You do not need any second component. eg code:

<template>
  <div class="container">
        <b-card-group deck v-for="i in Math.ceil(beers.length/4)" :key="i">
          <b-card
            v-bind:key="beer.id"
            v-for="beer in beers.slice((i-1)*4, (i-1)*4 +  4)"
            :title="beer.name"
            :img-src="beer.image_url"
            :alt="beer.name"
            img-top
            style="max-width: 20rem ;"
            class="mb-2"
          >
            <b-card-text>
              {{ beer.tagline }}
            </b-card-text>
            <b-button href="#" variant="primary">View Beer details</b-button>
            
          </b-card>
        </b-card-group>
      </div>
</template>
<script>
export default {
  name: "Beers",
  props: ["beers"],
};
</script>
<style scoped></style>

Leave a comment