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 ♥