如何使用 bootstrap vuejs 使复选框在下拉列表中工作答案

【问题标题】：How to make checkbox work in dropdown using bootstrapvuejs如何使用 bootstrap vuejs 使复选框在下拉列表中工作
【发布时间】：2021-12-17 07:18:43
【问题描述】：

我正在尝试让这个下拉菜单在 bootstrapvuejs 中工作。

但由于某种原因，它不允许我勾选方框。如何在下拉菜单关闭之前让该框打勾？

<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>

【问题讨论】：

看起来你想要一个 Vue 多选

标签： html vue.js bootstrap-vue

【解决方案1】：

您不能在<b-dropdown-item> 中添加<b-form-checkbox>。

要解决这个问题，你必须在里面添加<b-form-checkbox> <b-dropdown-form>

你必须直接在<b-dropdown>中添加<b-form-checkbox>

<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>

在<b-dropdown> 标签内，您只能添加下面提到的子标签

<b-dropdown-item>
<b-dropdown-item-text>
<b-dropdown-divider>
<b-dropdown-form>
<b-dropdown-group>
<b-dropdown-header>

DEMO Link

【讨论】：

【解决方案2】：

您不能在<b-dropdown-item> 内使用<b-checkbox>，而不是完整的“复选框”就像button 一样工作。

您只需删除您的<b-dropdown-item>，如下所示：

<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>

您也可以添加<b-dropdown-items>，但您必须将它们与b-form-checkbox 分开设置，而不是像buttons 一样工作。

【讨论】：