如何使用bootstrapvuejs使復選框在下拉串列中作業-有解無憂

我試圖讓這個下拉選單在 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>
          </div>
       </template>
<script>
export default {
  name: 'InventoryFilterButton.vue'
};
</script>

<style scoped>

uj5u.com熱心網友回復：

您不能<b-checkbox>在 a 內部使用，而<b-dropdown-item>不是完整的“復選框”像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.

uj5u.com熱心網友回復：

你不能在<b-form-checkbox>里面添加<b-dropdown-item>。

要解決這個問題，你必須在<b-form-checkbox>里面添加<b-dropdown-form>

直接<b-form-checkbox>在里面添加<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>

在<b-dropdown>標簽內，您只能添加下面提到的子標簽

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

演示鏈接

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/346403.html

標籤：html Vue.js 引导-vue

上一篇：在不改變原始精確值的情況下向用戶顯示一個帶有兩位小數的數字[javascript]

下一篇：防止Vue.js重新渲染子組件