Vue add class with one button adn remove class with other button

Question

Just beginning with Vue soooo...be gentle with me! :) Situation: I have 2 different buttons which I would like to set/unset an active class on another element, 1 button sets the class and the other should remove the active class. I'm struggling with the method side (i think...). Code is from VueStoreFront.

<SfButton
        class="sf-button--text navbar__grid-view"
        @click="listView = false"
      >
        <SfIcon size="32px" color="#BEBFC4" icon="tiles" />
      </SfButton>
      <SfButton
        class="sf-button--text navbar__list-view"
        @click="listView = true"
      >
        <SfIcon size="32px" color="#BEBFC4" icon="list" />
      </SfButton>

The element where the class should be set and removed

<div :class="'products ' + (listView ? 'active' : '')" >Lorem Ipsum</div>

Then in methods i have

methods: {
listView(){
   this.active=false
},

Can anyone put me in the right direction? Thanks in advance!

tony19 · Accepted Answer · 2022-07-16 02:04:48Z

1

you can read about vue class and style binding in the link below:

class and style binding in vue

but for short here is how you can do it:

<div :class="{'class-name': condition}"></div>

in the above example if the condition is true vue adds 'class-name' to the element and if it is false vue removes the class. so in your data object you can set the condition:

data() {
  condition: true,
}

and in your template you can have a button to control the condition value:

<button @click="condition = false"></button>

edited Jul 16, 2022 at 2:04

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 25, 2020 at 14:09

hamid niakan

2,8891 gold badge15 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue add class with one button adn remove class with other button

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related