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

Posted

技术标签:

【中文标题】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;


    

【讨论】:

以上是关于Vue.js - 将类添加到单击的按钮的主要内容,如果未能解决你的问题,请参考以下文章

在 Vue.js 中单击按钮时清除文本字段?

如果单击框列表,如何添加选择的按钮?

将类添加到按钮后功能不起作用

单击内部复选框时,使用jQuery将类添加到包含li

如何通过使用 Vue.js 中的路由器概念单击按钮来简单地从一个组件(主页)导航到另一个组件

每次点击将类添加到单个 div