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

Question

以下代码旨在显示按品牌显示的几种产品。当您按下品牌的按钮时，它将显示其产品。一切正常，但是我在品牌徽标中添加了过滤器，因此在您将鼠标悬停在其上方时，它看起来一直是灰色的。现在，我希望一旦按下按钮，该过滤器将变为无。

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

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

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


    }