ループ内でVue.jsのPaginationプラグインの複数のインスタンスを使用したいと思います。
例えば
for (let i in sources) {
// create a new tab with its own pagination
}
発生した問題は、@page-changed="pageChanged"メソッドが新しいページ番号のみを送信するため、どのタブストアを更新するかわからないことです。ストア名を関数pageChangedに送信しようとすると、新しいページ番号が上書きされるため、ストアを更新できません。
どのストアがpageChangedを呼び出しているかを識別する方法はありますか？
を使用し@page-changed="pageChanged($event, i)"ます。
$event ページネーションプラグインから出力されるpage＃値です。
iからのインデックスですfor (let i in sources)。
次に、function = pageChangedで、どのタブ（= sources [i]）が@ page-changedイベントを受信したかがわかります。
擬似コードは次のようになります。
または、タブオブジェクトをpageChangedに渡すことができます。 @page-changed="pageChanged($event, tab)"
<template>
<div>
<div v-for="(tab, tabIndex) in sources" :key="index">
<v-tab :data="tab">
<v-pagination @page-changed="pageChanged($event, tabIndex)"></v-pagination>
</v-tab>
</div>
</div>
</template>
<script>
export default {
data () {
return {
sources: ['tab1', 'tab2']
},
methods: {
pageChanged: function (data, tabIndex) {
// update something for this.sources[tabIndex]
}
}
}
}
</script>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加