Vue.js - Add class to clicked button

Question

The following code is meant to display several products displayed by brand. when you press the brand\'s button it will display its products. this is working fine however I\'ve a

Answer 1

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;


    }