I am trying to get this drop down to work in bootstrapvuejs.
But for some reason it not allowing me to tick the boxes. how can i get the box to tick before the dropdown closes?
<template>
<div class="inventory-filter-button">
<b-dropdown id=InventoryFilterButton variant="transparent" text="Split Link" checkbox-menu allow-focus :right="right">
<template #button-content>
<span>
<font-awesome-icon size="1x" :icon="['fas', 'filter']"/>
</span>
</template>
<b-dropdown-item>
<b-form-checkbox id="checkbox-1" v-model="status" name="checkbox-1"
value="accepted" unchecked-value="not_accepted"> All
</b-form-checkbox>
</b-dropdown-item>
<b-dropdown-item>
<b-form-checkbox id="checkbox-1" v-model="status" name="checkbox-1"
value="accepted" unchecked-value="not_accepted"> Department
</b-form-checkbox>
</b-dropdown-item>
</b-dropdown>
</div>
</template>
<script>
export default {
name: 'InventoryFilterButton.vue'
};
</script>
<style scoped></style>
You can't use <b-checkbox> inside of a <b-dropdown-item> than the complete "checkbox" is working like a button.
You just have to remove your <b-dropdown-item> like following:
<template>
<div class="inventory-filter-button">
<b-dropdown id=InventoryFilterButton variant="transparent" text="Split Link" checkbox-menu allow-focus :right="right">
<template #button-content>
<span>
<font-awesome-icon size="1x" :icon="['fas', 'filter']"/>
</span>
</template>
<b-form-checkbox id="checkbox-1" v-model="status" name="checkbox-1"
value="accepted" unchecked-value="not_accepted"> All
</b-form-checkbox>
<b-form-checkbox id="checkbox-1" v-model="status" name="checkbox-1"
value="accepted" unchecked-value="not_accepted"> Department
</b-form-checkbox>
</b-dropdown>
</div>
</template>
You can also add <b-dropdown-items> but you have to set them seperate from the b-form-checkbox than these are all working like buttons.
You can't add <b-form-checkbox> inside <b-dropdown-item>.
To fix the issue you have to add <b-form-checkbox> inside
<b-dropdown-form>
Directly you have to add <b-form-checkbox> inside <b-dropdown>
<div id="app">
<b-dropdown
variant="transparent"
text="Split Link"
checkbox-menu
allow-focus>
<template #button-content>
<span>
<font-awesome-icon size="1x" :icon="['fas', 'filter']" />
</span>
</template>
<b-dropdown-form>
<b-form-checkbox
id="checkbox-1"
name="checkbox-1"
value="accepted"
unchecked-value="not_accepted">All
</b-form-checkbox>
<b-form-checkbox
id="checkbox-2"
name="checkbox-2"
value="accepted1"
unchecked-value="not_accepted2">Department
</b-form-checkbox>
</b-dropdown-form>
</b-dropdown>
</div>
Inside <b-dropdown> tag you can add only below mentioned child tags
<b-dropdown-item><b-dropdown-item-text><b-dropdown-divider><b-dropdown-form><b-dropdown-group><b-dropdown-header>