以下代码旨在显示按品牌显示的多个产品。当您按下该品牌的按钮时，它将显示其产品。这工作正常，但是我在品牌 Logo 中添加了一个过滤器，因此它看起来是灰色的，直到您将鼠标悬停在它上面。现在我希望一旦您按下按钮，该过滤器就会更改为“无”。
到目前为止，我只完成了从所有品牌中删除过滤器，这违背了突出显示按下的按钮的目的。我如何才能将事件类仅应用于一个按钮，即用户按下的按钮？
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;
}
}
}
}
如上所述，buttonActive 类应用于所有按钮，我只想将其应用于按下的按钮。
最佳答案
尝试添加另一个名为currentIndex的数据对象属性并将其更新为单击的按钮索引:
// DATA
data() {
return {
currentIndex:-1,
isActive: false,
...
在模板内部绑定(bind)类如下 :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
方法:
changeBrand(index) {
this.object = this.brand[index].products;
this.currentIndex=index;
}
关于javascript - Vue.js - 将类添加到单击的按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57742076/