Question
The following code is meant to display several products displayed by brand. when you press the brand's button it will display its products. this is working fine however I've added a filter to the brands logo so it looks grey until you hover over it. now i want that filter to change to none once you press the button.
So far I've only accomplished to remove the filter from all brands which defeats the purpose of highlighting the pressed button. How can i apply the class active to only one button, the one the user is pressing?
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;
}
}
}
js:
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;
}
}
}
}
as mentioned above the buttonActive class is being applied to all the
buttons, and i just want it to be applied to the pressed button.
Answer
Try to add another data object property called currentIndex and update it to
the clicked button index :
// DATA
data() {
return {
currentIndex:-1,
isActive: false,
...
inside the template bind the class as follows :class='{buttonActive : (index==currentIndex) }':
<div class="buttonBrand">
<button v-for="(element, index) in brand" :key="index" :class='{buttonActive : (index==currentIndex) }' @click="changeBrand(index)">
<img v-bind:src="element.imageBrand" alt />
</button>
</div
methods :
changeBrand(index) {
this.object = this.brand[index].products;
this.currentIndex=index;
}
