1

To com um problema de estilização no VueJS. Através do v-for pego 3 botões da API, até ai tudo bem.O que eu preciso é que quando clicar em um dos 3 botões ele simplesmente altere a cor. Quando tento fazer essa transição de cor em UM botão, todos são afetados ! Queria um ideia de como fazer, lembrando que os botões não estão 'separados' tipo: < 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>

Enfim, preciso arrumar uma forma de aplicar a estilização em somente um botão, usando o data-v-xxxxx sei la .. Se tiverem algo relacionado ou ideia de solução, ficarei grato !!

1
  • 1
    O seu problema é que os 3 botões usam a mesma variável para definir se eles são "success" ou não. Ou seja, se isActive === true os 3 botões receberão a classe btn-success pois está programado para fazer assim. Você teria que ter um isActive para cada botão para funcionar do jeito que você quer. Commented 8/04/2019 às 21:06

2 Respostas 2

2

Existem diversas formas de se fazer isso, vou te dar um exemplo com interligação de classe e estilo.

Primeiramente vamos precisar de um data que vai simular os botões que você recebe da API e renderizar eles na tela.

<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>

E aqui começa a mágica, vamos usar uma classe css para estilizar os botões, e criar um método para atualizar o nosso array de botões, para isso vou usar o index atual do botão para saber qual item do array atualizar:

<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>

Você também pode dar um toggle ao invés de mudar a cor apenas uma vez:

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

Segue um exemplo completo no Code Sandbox: https://codesandbox.io/s/1ro09r43zj?fontsize=14

2
  • 1
    Embora este link possa responder à pergunta, é melhor incluir as partes essenciais da resposta aqui e fornecer o link para referência. As respostas apenas por link podem ser invalidadas se a página com o link for alterada. - Da Revisão Commented 9/04/2019 às 0:49
  • 1
    @IcaroMartins, pronto, atualizei a resposta com mais informações.
    – waghcwb
    Commented 9/04/2019 às 1:15
0

Outra solução foi encontrada por um colega de trabalho (méritos ao Guilherme). O problema apesar de simples foi bastante confuso pra mim no início. Abaixo foi o que implementamos:

<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 = '';
        });
}

No estilo:

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

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .