Vue.js - 向单击的按钮添加类
[英] Vue.js - Add class to clicked button
本文介绍了Vue.js - 向单击的按钮添加类的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下代码旨在显示按品牌显示的多个产品.当您按下该品牌的按钮时，它将显示其产品.这工作正常，但是我在品牌徽标中添加了一个过滤器，因此它看起来是灰色的，直到您将鼠标悬停在它上面.现在我希望一旦您按下按钮，该过滤器就更改为无.
到目前为止，我只完成了从所有品牌中删除过滤器的工作，这违背了突出显示按下按钮的目的.如何将活动类仅应用于一个按钮，即用户按下的按钮?
html:
<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/>
<div class="product-wrapper"><single-product-new v-for="(element,index) in object" :key="index" :element="element"/>
scss:
.buttonBrand {显示:弹性；按钮 {边距:25px 自动；对齐内容:间隔；图片{过滤器:灰度(100%)对比度(30%)；}图像:悬停{过滤器:无；}.活跃 {图片{过滤器:无；}}}.buttonActive {图片{过滤器:无；}}}
js:
<代码>const singleProductNew = () =>进口(../singleProductNew/singleProductNew.vue")；导出默认{//成分成分: {单品新品},道具: {},//数据数据() {返回 {isActive: 假,对象:空，牌: [{标题:'lg',imageBrand: "/img/lg.png",产品: [{音量:123"，能量密封:A++"，尺寸:123"，瓦数:123"，颜色: [{价格:123"，费用:111"，参考:asdasdasda"，颜色名称:白色"，可用性:是"，图像:'/img/hot_1.png'},{价格:321"，费用:222"，参考:23123"，颜色名称:灰色"，可用性:否"，图像:'/img/hot_1_b.png'}]},{音量:123"，能量密封:A++"，尺寸:123"，瓦数:123"，颜色: [{价格:123"，费用:333"，参考:123"，颜色名称:灰色"，可用性:是"，价格:123"，图像:'/img/hot_2.png'},]}],},{title: '三星',imageBrand: "/img/samsung.png",产品: [{音量:333"，能量密封:A++"，尺寸:123"，瓦数:123"，颜色: [{价格:888"，费用:77"，参考:123"，颜色名称:白色"，可用性:是"，图像:'/img/sam_1.png'},{价格:321"，费用:123"，参考:23123"，颜色名称:灰色"，可用性:否"，图像:'/img/sam_1_b.png'}]},{音量:1123"，能量密封:A++"，尺寸:123"，瓦数:123"，颜色: [{价格:123"，费用:123"，参考:123"，颜色名称:灰色"，可用性:是"，价格:123"，图像:'/img/sam_2.png'},]}],},]}},安装(){this.object = this.brand[0].products;},//方法方法: {改变品牌(索引){this.object = this.brand[index].products;如果(this.isActive){this.isActive = false;}别的{this.isActive = 真;}}}}如上所述，buttonActive 类将应用于所有按钮，而我只想将其应用于按下的按钮.
解决方案
尝试添加另一个名为 currentIndex 的数据对象属性，并将其更新为被点击的按钮索引:
//数据数据() {返回 {当前索引:-1，isActive: 假,...
在模板内部绑定类如下:class='{buttonActive : (index==currentIndex) }':
<button v-for="(element, index) in brand" :key="index" :class='{buttonActive : (index==currentIndex) }' @click="changeBrand(index)"><img v-bind:src="element.imageBrand" alt/></div
方法:
changeBrand(index) {this.object = this.brand[index].products;this.currentIndex=索引；}
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.
解决方案
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;
}
这篇关于Vue.js - 向单击的按钮添加类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
