如何使用vue-select和b-分页？

Question

我试图使用引导-vue中的v分页组件来处理分页。它或多或少地按照我的要求工作，但是，当我单击某个页面时，组件正在关闭。

​

​

在选择其中一个选项之前，我想知道如何防止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-选择，我会很高兴知道。

Answer 1

您可以在@mouseup.native.capture.stop标记中使用b-pagination来防止关闭vue-select下拉列表。而且，在我看来，您可以使用vue-multiselect获得更好的用户体验，但这取决于您和您的需要。我只想向你提出另一种选择。我提供了一个简单的片段来展示这一点：

​

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>

​