Vue.js-将类添加到单击的按钮 [英] Vue.js - Add class to clicked button
问题描述
以下代码旨在显示按品牌显示的几种产品。当您按下品牌的按钮时，它将显示其产品。一切正常，但是我在品牌徽标中添加了过滤器，因此在您将鼠标悬停在其上方时，它看起来一直是灰色的。现在，我希望一旦按下按钮，该过滤器将变为无。
到目前为止，我只完成了从所有品牌中删除过滤器的操作，这违背了突出显示按下按钮的目的。我如何才能将活动类仅应用于用户按下的一个按钮？
html：
< template>
< div>
< div class = buttonBrand>
< button v-for =品牌中的（元素，索引）：key = index：class =’{buttonActive：isActive}’@ click = changeBrand（index）>
< img v-bind：src = element.imageBrand alt />
< / button>
< / div>
< div class = product-wrapper>
<单一产品新v-for =（element，index）in object：key = index：element = element />
< / div>
< / div>
< / template>
scss：
.buttonBrand {
display：flex;
按钮{
保证金：25px自动；
证明内容：间隔；
img {
滤镜：灰度（100％）对比度（30％）;
}
img：hover {
过滤器：无；
}
.is-active {
img {
filter：none;
}
}
}
.buttonActive {
img {
filter：none;
}
}
}
js：
const singleProductNew =（）=> import（ ../ singleProductNew / singleProductNew.vue）;
导出默认值{
//组件
组件：{
singleProductNew
}，
道具：{
}，
//数据
data（）{
return {
isActive：false，
对象：null，
品牌：[{
标题： lg，
imageBrand： / img / lg.png，
产品：[{
体积： 123，
能量密封： A ++，
尺寸： 123，
瓦数： 123，
颜色：[{
价格： 123，
费用： 111，
参考： asdasdasda，
colorName： white，
可用性： yes，
image ：'/img/hot_1.png'
}，
{
价格： 321，
费用： 222，
参考： 23123，
colorName：灰色，
可用性：否，
图片：'/img/hot_1_b.png'
}
]
}，
{
量： 123，
energyseal： A ++ ，
尺寸： 123，
瓦数： 123，
颜色：[{
价格： 123，
费用： 333，
参考： 123，
colorName：灰色，
可用性：是，
价格： 123，
图片：'/ img / hot_2 .png'
}，]
}
]，
}，
{
标题： samsung，
imageBrand： / img / samsung.png，
产品：[ {
容量： 333，
能量密封： A ++，
尺寸： 123，
瓦数： 123，
颜色：[{
价格： 888，
费用： 77，
参考： 123，
colorName： white，
可用性： yes，
图片：'/img/sam_1.png'
}，
{
价格： 321，
费用： 123，
参考： 23123，
colorName：灰色，
可用性： no，
图片：'/ img / sam_1 _b.png'
}
]
}，
{
量： 1123，
能动密封： A ++，
尺寸： 123，
瓦数： 123，
颜色：[{
价格： 123，
费用： 123，
参考： 123，
colorName：灰色，
可用性：是，
价格： 123，
图片：'/ img / sam_2.png'
}，]
}
]，
}，
]
}
}，
mount（）{ b $ b this.object = this.brand [0] .products;
}，
//方法
方法：{
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，
...
在模板内部按如下所示绑定类
：class ='{buttonActive：（index == currentIndex）}'：< div class = buttonBrand>
< button v-for =品牌中的（元素，索引）：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;
}
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
buttonActiveclass is being applied to all the buttons, and i just want it to be applied to the pressed button.解决方案Try to add another data object property called
currentIndexand 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> </divmethods :
changeBrand(index) { this.object = this.brand[index].products; this.currentIndex=index; }
这篇关于Vue.js-将类添加到单击的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
