How can I align this checkbox with the switch on the right? the switch is only appear when checkbox are checked and filled in the object. But I want the switch on the same row with the checked box. How can I achieve this? thanks
The source code
the
<b-form-group label="AddOn">
<b-row>
<b-col cols="2">
<b-form-checkbox-group
id="produkAddon"
v-model="form.produkAddon"
:options="form.produkAddonOptions"
name="produkAddon"
stacked
></b-form-checkbox-group>
</b-col>
<b-col cols="2">
<div v-show="form.produkAddon.length > 0">
<b-form-checkbox
v-for="addon in form.produkAddon"
:key="addon.id"
v-model="addon.isRequired"
:name="addon.id + addon.nama"
:id="addon.id + addon.nama"
switch
>
Must Include
</b-form-checkbox>
</div>
</b-col>
</b-row>
</b-form-group>
and the data
form: {
produkAddonOptions: [
{
value: { id: 1761, nama: 'Box', isRequired: false },
text: 'Box'
},
{
value: { id: 8712, nama: 'Bubble Wrap', isRequired: false },
text: 'Bubble Wrap'
}
],
produkAddon: []
}
Aucun commentaire:
Enregistrer un commentaire