Attempting to design a layout where each row consists of 3 cards using Bootstrap's Grid layout for responsiveness.
The challenge lies in the fact that the card data is stored in JSON format, and the length of the JSON Object array may vary, leading to a different number of cards to display.
The goal is to dynamically render the cards using VueJS, bootstrap-vue, and JSON.
It has been understood that the number of objects in the JSON corresponds to the number of cards on the screen, with
number of cards / 3 = number of rowsCurrently utilizing Vue-js and bootstrap-vue to accomplish the task but facing obstacles in rendering the cards dynamically within the grid.
Check out the code snippet below from CardRenderer.vue:
<template lang="html">
<div>
<hr>
<b-container class="bv-example-row">
<b-row v-for="row in rows" :key="row.id">
<b-col v-for="card in row.cards" :key="card.id">
<b-card
:title="card.title"
img-src="https://picsum.photos/600/300/?image=25"
img-alt="Image"
img-top
tag="article"
style="max-width: 20rem;"
class="mb-2"
>
<b-card-text>
Some quick example text to build on the card title and make up the bulk of the card's content.
</b-card-text>
<b-button href="#" variant="primary">Go somewhere</b-button>
</b-card>
</b-col>
</b-row>
</b-container>
</div>
</template>
<script lang="js">
export default {
name: 'CardRenderer',
props: {
passer: Object
},
mounted() {
// eslint-disable-next-line
console.log(this.renderObject);
},
computed: {
rows() {
let totalRows = Math.ceil(this.passer.length / 3);
let counter = 0;
return Array.from({ length: totalRows }, () => ({
id: ++counter,
cards: this.passer.slice((counter - 1) * 3, counter * 3),
}));
}
}
}
</script>
<style scoped>
</style>
This represents a static structure of the page. All rendered cards should correspond to the JSON data passed, which is stored within the JSON.
Need guidance on dynamically rendering cards in a grid layout.