Vue.Js - Add Class to Clicked Button

Vue.js toggle class on click

You could have the active class be dependent upon a boolean data value:

<th 
  class="initial " 
  v-on="click: myFilter"
  v-class="{active: isActive}">
  <span class="wkday">M</span>
</th>

new Vue({
  el: '#my-container',

  data: {
    isActive: false
  },

  methods: {
    myFilter: function() {
      this.isActive = !this.isActive;
      // some code to filter users
    }
  }
})

Vue.js - Add class to clicked button

Try to add another data object property called currentIndex and update it to the clicked button index :

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

inside the template bind the class as follows :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

methods :

    changeBrand(index) {
        this.object = this.brand[index].products;
        this.currentIndex=index;

    }

I want to add active class on the button that got clicked and remove from the another button, vice versa in vue js

I would like to give you a basic idea which might help you.

<button :class="{ active: isActiveAc, sortas: true }"@click="sortUp(),setFalse(1)>Price low to Hight</button>
<button:class="{ active: isActiveDc, sortas: true }"@click="sortDown(),setFalse(1)">Price Hight to Low</button>

and add the following function in a method.

setFalse(c) {
      if (c == 1) {
        this.isActiveAc = true;
        this.isActiveDc = !this.isActiveAc;
      } else if (c == 2) {
        this.isActiveDc = true;
        this.isActiveAc = !this.isActiveDc;
      }
    },

Vue.js - Add Class on Click Event

You can do something like this:

<div class="quiz-item" @click="$event.target.classList.toggle('classname')">

You can check the fiddle demonstrating this: Here

Add active class on @click on button when current is active - Composition API

Did you try to bind class:

<button @click="orderByTerm('company')" :class="order === 'company' ? 'active' : ''">
...

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

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>

How to give class only clicked element, and remove when other element is clicked using Vue.js?

You can do something like this :

new Vue({
  el: '#app',
  data: {
    selected: 0,
  },
  methods: {
    giveColorTo(y) {
        this.selected = y;
    }
  }
})

.green {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>
<div id="app">
  <li class="some" @click="giveColorTo(y)" :class="{green:selected == y}" v-for="y in 10" :key="y">
     menu  clicked {{y}}
  </li>
</div>

Toggle class on click in VueJS

You need to catch the event handler in the method and using that you can refer to the callee i.e. anchor object in this case.

See the fiddle : https://jsfiddle.net/s9r4q0gc/2/

activeLink(event) {
    if(event.target.className == "noclass")
    {
        event.target.className = "link active";
    }
    else
    {
        event.target.className = "noclass";
    }
  }

UPDATED:

May be try this fiddle and see if it is hitting the bulls eye : https://jsfiddle.net/s9r4q0gc/4/

  var app = new Vue({
    el: '#app',
    data: {
      isActive: false
    },
    methods: {
      activeLink(event) {
        var checkboxes = document.getElementsByClassName ("noclass");

        for (var i=0; i<checkboxes.length; i++) {
           checkboxes[i].className = "link active";
           //checkboxes[i].className = "link";
        }
            event.target.className = "noclass";
      }
    }
  })

---

Related Topics