How to make checkbox work in dropdown using bootstrapvuejs

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>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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

Method 2

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.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x