如何将 vue-select 与 b 分页一起使用？

Question

我正在尝试使用 bootstrap-vue 中的 v-pagination 组件进行分页。它或多或少可以按我的意愿工作，但是当我单击某个页面时，组件正在关闭。

我想知道在选择其中一个选项之前如何防止 v-select 关闭。

我的代码：

<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>

如果有解决方法或除 v-select 之外的其他选项，我会很高兴知道。

Answer 1

您可以在b-pagination 标签中使用@mouseup.native.capture.stop 来防止关闭vue-select 的下拉菜单。 另外，在我看来，您可以使用vue-multiselect 来获得更好的用户体验，但这取决于您和您的需要。我只是想向您推荐它作为另一种选择。 我提供了一个简单的 sn-p 来展示这一点：

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>