I found my inspiration from the following sources:
Below is how my vue component looks like:
<template>
...
<b-card-group deck v-for="row in formattedItems">
<b-card :title="item.title"
img-src="http://placehold.it/140?text=No image"
img-alt="Img"
img-top
v-for="item in row">
<p class="card-text">
{{item.price}}
</p>
<p class="card-text">
{{item.country}}
</p>
<div slot="footer">
<b-button-group size="sm">
<b-button :pressed.sync="oriPress" variant="outline-primary">Original</b-button>
<b-button :pressed.sync="kwPress" variant="outline-primary">Kw</b-button>
</b-button-group>
<b-btn variant="primary" block>Add</b-btn>
</div>
</b-card>
</b-card-group>
....
</template>
<script>
export default {
..
data () {
return{
items: [
{id:1, title:'chelsea', price:900, country: 'england'},
{id:2, title:'liverpool', price:800, country: 'england'},
{id:3, title:'mu', price:700, country: 'england'},
{id:4, title:'city', price:600, country: 'england'},
{id:5, title:'arsenal', price:500, country: 'england'},
{id:6, title:'tottenham', price:400, country: 'england'},
{id:7, title:'juventus', price:300, country: 'italy'},
{id:8, title:'madrid', price:200, country: 'span'},
{id:9, title:'barcelona', price:100, country: 'span'},
{id:10, title:'psg', price:50, country: 'france'}
],
oriPress: true,
kwPress: false
}
},
mounted: function () {
this.getItems()
},
computed: {
formattedItems() {
return this.items.reduce((c, n, i) => {
if (i % 4 === 0) c.push([]);
c[c.length - 1].push(n);
return c;
}, []);
}
}
}
</script>
Upon execution of the script, all original buttons are active and all kw buttons are inactive by default.
However, I encounter an issue where clicking either the kw or original button makes all buttons active or inactive. My desired functionality is to only activate the selected button within each box when clicked.
For instance, if there are 10 boxes, clicking the original button in the third box should only activate that button while deactivating the kw button. The same behavior should apply for other boxes as well.
How can I achieve this specific behavior?