How to make checkbox work in dropdown using bootstrapvuejs-CodePudding

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>
          </div>
       </template>
<script>
export default {
  name: 'InventoryFilterButton.vue'
};
</script>

<style scoped>

CodePudding user response：

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.

CodePudding user response：

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>

DEMO Link