Estoy tratando de hacer que este menú desplegable funcione en bootstrapvuejs.
Pero por alguna razón no me permite marcar las casillas. ¿Cómo puedo marcar la casilla antes de que se cierre el menú desplegable?
<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>No puede usar <b-checkbox> dentro de un <b-dropdown-item> la "casilla de verificación" completa funciona como un button .
Solo tiene que eliminar su <b-dropdown-item> como sigue:
<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> También puede agregar <b-dropdown-items> pero debe configurarlos por separado de la b-form-checkbox ya que todos funcionan como buttons .
No puede agregar <b-form-checkbox> dentro <b-dropdown-item> .
Para solucionar el problema, debe agregar <b-form-checkbox> dentro <b-dropdown-form>
Directamente tienes que agregar <b-form-checkbox> dentro <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> Dentro de la etiqueta <b-dropdown> puede agregar solo debajo de las etiquetas secundarias mencionadas
<b-dropdown-item><b-dropdown-item-text><b-dropdown-divider><b-dropdown-form><b-dropdown-group><b-dropdown-header>