jeudi 26 novembre 2020

How to align/make it one row Bootstrap-Vue checkbox with the switch?

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

bootstrap-vue checkbox with the switch

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