0

Eu estou usando o Boostrap e tenho um setor no formulário onde o cliente vai escolher alguns itens, e ao clicar no item o bootstrap adiciona a classe active no item selecionado, e com css eu faço o item mudar de cor.

Ficando mais ou menos assim:

<label class="btn bg-grey active">
  <input type="checkbox" name="tagslist[]" value="valor"> Titulo
</label>

Eu estou usando o vue.js para criar os itens dinamicamente através de dados em json. E para selecionar os checkbox automaticamente de acordo com o registro aberto.

Mas o meu problema é que no vue.js quando ele inicia deixando checado os itens que preciso, ele só faz no checkbox, mas não adiciona a classe active no label, ficando dessa forma:

<label class="btn bg-grey">
  <input type="checkbox" name="tagslist[]" value="valor" checked> Titulo
</label>

Como eu faço para ele adicionar essa classe na tag pai deste input do checkbox?

Segue abaixo o código funcionando, veja que ao iniciar os itens checado não mudaram de cor, só mudam quando clicar em cima, e ainda da um bug que acaba mudando de cor mesmo que o item não esteja checado.

new Vue({
  el: '#v-for-tags',
  data: {
     seltags: ["feminino","masculino"],
     tagsitens: {"codes":{"feminino":{"tagtitulo":"Mulheres","tagslug":"women"},"infantil":{"tagtitulo":"Crianças","tagslug":"childs"},"masculino":{"tagtitulo":"Homens","tagslug":"men"}},"list":["feminino","infantil","masculino"]}
  }
});
.btn.bg-grey.active {
    background-color: #673ab7 !important;
}

.iconsdinamic {
    float: left;
    margin-left: 10px;
}
<div class="btn-group-toggle" data-toggle="buttons" id="v-for-tags">
    <div v-for="(option, keyoption) in tagsitens.codes" class="iconsdinamic">
        <label class="btn bg-grey">
          <input type="checkbox" name="tagslist[]" autocomplete="off" v-bind:value="keyoption" v-model="seltags"> {{ option.tagtitulo }}
        </label>
   </div>
</div>

<!-- --------------------------------------------- -->

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

Me ajudem por favor. Obrigada ♥

1 Resposta 1

1

Você pode fazer assim:

v-bind:class="{ active: seltags.includes(keyoption) }"

O código acima:

  • Adicione o código na label

     <label class="btn bg-grey">
    
  • Verifica se o objeto seltags contém keyoption se já, retorna true se não false

  • o retorno irá determinar se a classe active será adicionada.

Para resolver o problema citado via comentário:

se vc apertar em cima do quadradinho do checkbox, ele muda de cor mostrando esta selecionado mas não faz a checagem do checkbox.

basta remover o atributo: data-toggle="buttons"

Exemplo funcionando

new Vue({
  el: '#v-for-tags',
  data: {
     seltags: ["feminino","masculino"],
     tagsitens: {"codes":{"feminino":{"tagtitulo":"Mulheres","tagslug":"women"},"infantil":{"tagtitulo":"Crianças","tagslug":"childs"},"masculino":{"tagtitulo":"Homens","tagslug":"men"}},"list": ["feminino","infantil","masculino"]}
  },
});
.btn.bg-grey.active {
    background-color: #673ab7 !important;
}

.iconsdinamic {
    float: left;
    margin-left: 10px;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div class="btn-group-toggle" id="v-for-tags">
    <div v-for="(option, keyoption) in tagsitens.codes" class="iconsdinamic">
        <label class="btn bg-grey" v-bind:class="{ active: seltags.includes(keyoption) }">
          <input type="checkbox" name="tagslist[]" autocomplete="off" v-bind:value="keyoption" v-model="seltags"> {{ option.tagtitulo }}
        </label>
   </div>
</div>

Referência

6
  • Obrigadaa, só tenho mais uma duvida. desse modo que você colocou ele faz um if caso os dados selecionados for igual ao do valor ne assim que cria os dados dinamicos? Tem algum modo desse if monitorar quando o checkbox estiver ativo mesmo depois de criado? Pq assim, se vc apertar em cima do quadradinho do checkbox, ele muda de cor mostrando esta selecionado mas não faz a checagem do checkbox. Commented 1/11/2018 às 2:58
  • Sim sim eu sei. A sua resposta ja me ajuda bastante, mas perguntei pq se tivesse um jeito de monitorar o click pelo check do checkbox, seria ainda melhor. Perguntei mais pra ter conhecimento mesmo. Mas se não tiver como tudo bem mesmo assim. ^^ Commented 1/11/2018 às 3:02
  • Não pensei em utilizar o Boostrap-Vue, pq eu teria que mudar tudo que ja foi criado não teria?? O site ja ta quase pronto com boostrap e vue separados. Tenho medo de alterar e acabar prejudicando o site todo. Commented 1/11/2018 às 3:03
  • É acho que ele, só monitora o clique no botão pela classe btn-group-toggle. Acho que o boostrap fez isso pra usar esse active em qualquer coisa que use essa classe. Acho que se desse pra fazer o vue monitorar o check do checkbox, daria para tirar o toggle do boostrap e usar só pelo vue. Acho né, não sei se daria certo. Commented 1/11/2018 às 3:31
  • 1
    @SamantaSilva veja agora como esta! Creio que agora esteja tudo certo.
    – NoobSaibot
    Commented 1/11/2018 às 4:23

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 .