How to add a class to a label tag of an input dynamically selected by Vue.js?

Question

I am using Boostrap and have a sector in the form where the client will choose some items, and when clicking on the item the bootstrap adds the class active in the selected item, and with css I make the item change color.

Getting kind of like this:

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

I am using the Vue.js to create items dynamically through json data. And to automatically select checkboxes according to the open record.

But my problem is that in Vue.js when it starts leaving checked the items I need, it only does it in the checkbox, but does not add the active class in the label, thus staying:

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

How do I get him to add this class to the parent tag of this checkbox input?

Follow below the code working, see that when starting the checked items do not change color, only change when click on top, and still a bug that ends up changing color even if the item is not checked.

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>

Please help me out. Thank you

Answer 1

You can do it like this:

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

The code above:

• Add the code to label

   <label class="btn bg-grey">
  

• Checks whether the object seltags contains keyoption if ever, return true if not false

• the return will determine if the class active will be added.

To solve the problem cited via comment:

if you press on the checkbox square, it changes color showing this selected but does not check the checkbox.

just remove the attribute: data-toggle="buttons"

Working example

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>

Reference

• Class and Style Interconnections