A unique function of the code below is showcasing various products by brand. When a user clicks on a brand's button, it will display the corresponding products. This feature works seamlessly; however, I have implemented a filter on the brands' logos to appear grey until hover. Now, I wish for this filter to be removed when the button is pressed.
Currently, I have only managed to eliminate the filter from all brands, which defeats the purpose of highlighting the selected button. How can I assign the 'active' class to only one button, the one that the user is clicking?
HTML:
<template>
<div>
<div class="buttonBrand">
<button v-for="(element, index) in brand" :key="index" :class='{buttonActive : isActive }' @click="changeBrand(index)">
<img v-bind:src="element.imageBrand" alt />
</button>
</div>
<div class="product-wrapper">
<single-product-new v-for="(element,index) in object" :key="index" :element="element" />
</div>
</div>
</template>
SCSS:
.buttonBrand {
display: flex;
button {
margin: 25px auto;
justify-content: space-between;
img {
filter: grayscale(100%) contrast(30%);
}
img:hover {
filter: none;
}
.is-active {
img {
filter: none;
}
}
}
.buttonActive {
img {
filter: none;
}
}
}
JavaScript:
const singleProductNew = () => import("../singleProductNew/singleProductNew.vue");
export default {
// COMPONENTS
components: {
singleProductNew
},
props: {
},
// DATA
data() {
return {
isActive: false,
object: null,
brand: [{
title: 'lg',
imageBrand: "/img/lg.png",
products: [{
volume: "123",
energyseal: "A++",
dimensions: "123",
wattage: "123",
color: [{
price: "123",
fee: "111",
reference: "asdasdasda",
colorName: "white",
availability: "yes",
image: '/img/hot_1.png'
},
{
price: "321",
fee: "222",
reference: "23123",
colorName: "gray",
availability: "no",
image: '/img/hot_1_b.png'
}
]
},
{
volume: "123",
energyseal: "A++",
dimensions: "123",
wattage: "123",
color: [{
price: "123",
fee: "333",
reference: "123",
colorName: "gray",
availability: "yes",
price: "123",
image: '/img/hot_2.png'
},]
}
],
},
{
title: 'samsung',
imageBrand: "/img/samsung.png",
products: [{
volume: "333",
energyseal: "A++",
dimensions: "123",
wattage: "123",
color: [{
price: "888",
fee: "77",
reference: "123",
colorName: "white",
availability: "yes",
image: '/img/sam_1.png'
},
{
price: "321",
fee: "123",
reference: "23123",
colorName: "gray",
availability: "no",
image: '/img/sam_1_b.png'
}
]
},
{
volume: "1123",
energyseal: "A++",
dimensions: "123",
wattage: "123",
color: [{
price: "123",
fee: "123",
reference: "123",
colorName: "gray",
availability: "yes",
price: "123",
image: '/img/sam_2.png'
},]
}
],
},
]
}
},
mounted() {
this.object = this.brand[0].products;
},
// METHODS
methods: {
changeBrand(index) {
this.object = this.brand[index].products;
if(this.isActive){
this.isActive = false;
}else{
this.isActive = true;
}
}
}
}
In addition to the mentioned details, the buttonActive class is currently applied to all buttons, whereas I aim to apply it solely to the clicked button.