CODEWITHSUNDEEP
vue.jsvuejs2
KnapLelijk
KnapLelijk

Reputation: 87

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

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!

Upvotes: 1

Views: 1071

Answers (1)

hamid niakan
hamid niakan

Reputation: 2861

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>

Upvotes: 1

Related Questions