Vue.js - 将类添加到单击的按钮

Posted 2023-02-23

【中文标题】Vue.js - 将类添加到单击的按钮

【英文标题】：Vue.js - Add class to clicked button

【发布时间】：2021-11-01 14:40:24

【问题描述】：

以下代码用于显示按品牌展示的几种产品。当您按下品牌的按钮时，它将显示其产品。这工作正常，但是我在品牌徽标中添加了一个过滤器，因此它看起来是灰色的，直到您将鼠标悬停在它上面。现在，一旦您按下按钮，我希望该过滤器更改为无。

到目前为止，我只完成了从所有品牌中删除过滤器的操作，这违背了突出显示按下按钮的目的。我怎样才能将活动类仅应用于一个按钮，即用户按下的那个按钮？

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 类应用于所有按钮，我只想将其应用于按下的按钮。

【参考方案1】：

尝试添加另一个名为 currentIndex 的数据对象属性并将其更新为单击的按钮索引：

// DATA
data() 
    return 
         currentIndex:-1,
        isActive: false,
           ...

在模板里面绑定类如下: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;