我正在嘗試使用 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 之外的解決方法或其他選項，我會很高興知道。
uj5u.com熱心網友回復：
您可以@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/[email protected]/dist/vue-select.css" rel="stylesheet"/>
<script src="https://unpkg.com/[email protected]/dist/vue-select.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/402899.html
標籤：
下一篇：將資料發送到Vue中的占位符