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

以下代码用于显示按品牌显示的多个产品。当你按下该品牌的按钮时，它将显示其产品。这是很好的工作，但我已经添加了一个过滤器的品牌标志，所以它看起来灰色，直到你悬停在它。现在，我希望一旦你按下按钮，过滤器就变为无

到目前为止，我只完成了删除所有品牌的过滤器，这与突出显示按下的按钮的目的背道而驰。如何仅将类active应用于一个按钮，即用户正在按下的按钮

html:

js:

---

如上所述，ButtonActivity类正在应用于所有按钮，我只想将其应用于按下的按钮。

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

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

在模板内部按如下方式绑定类：class='{buttonActive:index==currentIndex}'：

.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;
        }
    }

}

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;
              }


        }

    }
}

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

<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;


    }