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

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 1

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;


    }