Change the color of only one button in Vuejs

Question

I have a styling problem in Vuejs. Through the v-get picked up 3 buttons of the API, so far so good. What I need is that when you click one of the 3 buttons it simply changes the color. When I try to make this color transition in ONE button, everyone is affected ! I wanted an idea of how to do, remembering that the buttons are not 'separate' type: < button > < button > < button >

     <div class="form-group">
         <label htmlFor="RequerenteId">Tabela</label>
             <div name="requerente">
                 <button class="botaoBusca" v-for="item in tabela" :key="item.id" :value="item.id"  v-on:click="filtraSelectBusca(item.id), isActive = !isActive" :class="{ 'btn-success': !isActive, 'btn-outline-danger': isActive  }" >{{item.descricao}}
                 </button>
             </div>
     </div>

Anyway, I need to figure out a way to apply styling to just one button, using the date-v-xxxxx sei la .. If you have anything related or idea of solution, I will be grateful !!

Answer 1

There are several ways to do this, let me give you an example with class and style interconnection.

First we will need a date that will simulate the buttons you get from the API and render them on the screen.

<script>
export default {
  data() {
    return {
      buttons: [
        { text: 'Button 1' },
        { text: 'Button 2' },
        { text: 'Button 3' },
      ],
    }
  },
}
</script>

<template>
  <div id="button-list">
    <button v-for="(button, index) in buttons" :key="index" class="btn">
      {{ button }}
    </button>
  </div>
</template>

And here begins the magic, we will use a css class to style the buttons, and create a method to update our array of buttons, for this I will use the current index of the button to know which item of the array update:

<script>
export default {
  data() {
    return {
      buttons: [
        { text: 'Button 1' },
        { text: 'Button 2' },
        { text: 'Button 3' },
      ],
    }
  },
  methods: {
    enableButton(index) {
      this.buttons[index].isActive = true
      this.$forceUpdate()
    },
  },
}
</script>

<template>
  <div id="button-list">
    <button
      v-for="(button, index) in buttons"
      :key="index"
      class="btn"
      :class="{ 'is-active': button.isActive }"
      @click="enableButton(index)"
    >
      {{ button.text }}
    </button>
  </div>
</template>

<style lang="scss">
.btn {
  // apenas a título de estilização
  border: none;
  padding: 1rem;
  border-radius: 4px;
  cursor: pointer;

  &:not(:last-child) {
    margin-right: 1rem;
  }

  // essa é a parte importante !
  &.is-active {
    background: #32a04b;
    color: #fff;
  }
}
</style>

You can also give a toggle instead of changing the color just once:

enableButton(index) {
  this.buttons[index].isActive = !this.buttons[index].isActive
  this.$forceUpdate()
},

Follow a full example in Code Sandbox: https://codesandbox.io/s/1ro09r43zj?fontsize=14

Answer 2

Another solution was found by a co-worker (merits to William). The problem although simple was quite confusing for me at first. Below is what we implemented:

<template>
          <div class="form-group">
                    <label htmlFor="RequerenteId">Tabela</label>
                    <div>
                      <div name="requerente" >
                        <button class="btn btn-primary filtro-btn" v-for="item in tabela" :key="item.id" :value="item.id" :class=" item.isActive " v-on:click="filtraSelectBusca(item.id)" >{{item.descricao}} </button>
                      </div>
                    </div>
                  </div>
</template>

  filtraSelectBusca(id){

        this.tabela.forEach(item => {
          item.id == id ? item.isActive = "isActive" : item.isActive = '';
        });
}

In style:

  .isActive{
    background-color: #399168;
    border-color: #399168;
  }

  .filtro-btn {
    margin: 0 3px;
  }