0
304
Vistas¿Cómo usar vue-select con b-paginación?
Estoy tratando de trabajar con paginación usando el componente v-pagination de bootstrap-vue. Funciona más o menos como quiero, sin embargo, cuando hago clic en una página determinada, el componente se cierra.
Me gustaría saber cómo puedo evitar que v-select se cierre antes de seleccionar una de las opciones.
Mi código:
<v-select id="municipio" v-model="municipioState" :options="municipiosPaginaAtual" :filterable="false" placeholder="Selecione seu município" label="municipio" @search="buscarMunicipio" > <div slot="no-options"> Selecione o Estado! </div> <li slot="list-footer" class="pagination" @click.prevent="" > <b-pagination v-model="municipioPaginacao" :total-rows="municipiosFiltradosQuantidade" :per-page="limit" first-number last-number /> </li> </v-select>Si hay una solución alternativa u otra opción que no sea v-select, me complacería saberlo.
1 Respuestas
Responde la pregunta0
puede usar @mouseup.native.capture.stop en la etiqueta b-pagination para evitar cerrar el menú desplegable de vue-select . Además, en mi opinión, puede usar vue-multiselect para una mejor experiencia de usuario, pero depende de usted y de sus necesidades. Solo quería sugerírtelo como otra opción. Proporcioné un fragmento simple para mostrar esto:
Vue.component("v-select", VueSelect.VueSelect); new Vue({ el: '#app', data() { return { books: [{ title: "Old Man's War" }, { title: "The Lock Artist" }, { title: "HTML5" }, { title: "Right Ho Jeeves" }, { title: "The Code of the Wooster" }, { title: "Thank You Jeeves" } ], perPage: 2, currentPage: 1, rows: 6 } }, }) <link href="https://unpkg.com/vue-select@3.16.0/dist/vue-select.css" rel="stylesheet"/> <script src="https://unpkg.com/vue-select@3.16.0/dist/vue-select.js"></script> <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" /> <script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script> <script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script> <div id="app"> <v-select :options="books" label="title"> <li slot="list-footer"> <b-pagination @mouseup.native.capture.stop v-model="currentPage" :total-rows="rows" :per-page="perPage"></b-pagination> </li> </v-select> </div>