如何解决BootstrapVue下拉菜单中复选框无法正常勾选的问题

问题原因 #

• 默认组件的点击后会触发下拉菜单自动关闭逻辑，导致复选框的勾选动作还没完成菜单就被关闭，看起来是勾选失效
• 你当前代码还存在几个错误：两个复选框的id、name属性完全重复，绑定了同一个v-model变量会导致联动异常，且没有在组件实例中声明对应响应式变量

解决方法 #

1. 给所有包含复选框的添加@click.native.prevent修饰符，阻止点击条目时的默认关闭下拉行为
2. 修正复选框的id、name属性，根据选数需求绑定对应v-model变量（单选绑同一个变量设不同value、多选绑独立变量或数组）
3. 在data选项中声明对应的绑定变量

修复后完整代码 #

<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 @click.native.prevent>    
        <b-form-checkbox 
          id="checkbox-all" 
          v-model="selectedStatus.all" 
          name="checkbox-all" 
          value="accepted" 
          unchecked-value="not_accepted"
        > 
          All 
        </b-form-checkbox>
      </b-dropdown-item>
      <b-dropdown-item @click.native.prevent>    
        <b-form-checkbox 
          id="checkbox-department" 
          v-model="selectedStatus.department" 
          name="checkbox-department"
          value="accepted" 
          unchecked-value="not_accepted"
        > 
          Department 
        </b-form-checkbox>
      </b-dropdown-item>
    </b-dropdown>
  </div>
</template>

<script>
export default {
  name: 'InventoryFilterButton',
  data() {
    return {
      right: false,
      selectedStatus: {
        all: 'not_accepted',
        department: 'not_accepted'
      }
    }
  }
};
</script>
    
<style scoped></style>

内容的提问来源于stack exchange，提问作者Scatterinc