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="https://stackoverflow.com/questions/57742076/element.imageBrand" alt />
  </button>
</div

methods :

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


    }

Leave a Comment