如何使用 bootstrap vue js 使复选框在下拉列表中工作
How to make checkbox work in dropdown using 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>
</b-dropdown>
</div>
</template>
<script>
export default {
name: 'InventoryFilterButton.vue'
};
</script>
<style scoped></style>
您不能在 <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
一样工作。
您不能在 <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>
我正在尝试让这个下拉菜单在 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>
您不能在 <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
一样工作。
您不能在 <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>