Hopefully everything is clear. I am open to making changes if needed to address any important points.
In one of my components, the array items are displayed within cards as shown below:
<b-card-group deck class="mb-3">
<b-card border-variant="danger" bg-variant="dark" text-variant="white" class="text-center" v-for="b in breakdownNumbers" :key="b"> {{b}}
</b-card>
</b-card-group>
The array itself is located in another component:
data() {
return {
bns: []
}
}
methods: {
addBns (bns) {
for (var b of bns) {
if(this.bns.indexOf(b) === -1) {
this.bns.push(b)
}
}
},
My current problem is that if there are 30 items added, all will be displayed in a single row causing the cards to shrink. My goal is to have only 5 cards displayed per row and then continue on the next row once the limit is reached.
I am looking for a simple solution to achieve this layout.
This is how it currently looks with 5 items added. When a user clicks New Breakdown, I want the new item to start on a new row below the initial 5 items in the bns[] array.
https://i.stack.imgur.com/IoEOn.jpg
After making some modifications, I now have the following code:
methods: {
addBns (bns) {
for (var b of bns) {
if(this.bns.indexOf(b) === -1) {
this.bns.push(b)
}
}
var bns = _.chunk(bns,3)
console.log(bns)
},
The console displays the split but I am unsure about the next steps. The array is still sent to the display component like before:
<build-breakdown-select :buildNumber="buildNumber" :breakdownNumbers="bns" @breakdowns="addBns"/>
The actual display of the cards is handled within the <build-breakdown-select> component.