791aebc346
Some checks failed
continuous-integration/drone/push Build is failing
- Complete GGZ Ecademy Nuxt.js user portal - Learning products browser and management - Member management interface - User authentication and roles - Multi-language support (NL/EN) - Vuex store for state management - Component-based architecture
51 lines
1.2 KiB
Vue
51 lines
1.2 KiB
Vue
<template>
|
|
<div class="text-center">
|
|
<v-btn text x-small :disabled="isFirstPage" @click="changePage('previous')">
|
|
<v-icon x-small>icon-arrow-left</v-icon>
|
|
</v-btn>
|
|
|
|
<small class="mx-2">
|
|
{{ `${page} / ${totalPages}` }}
|
|
</small>
|
|
|
|
<v-btn text x-small :disabled="isLastPage" @click="changePage('next')">
|
|
<v-icon x-small>icon-arrow-right</v-icon>
|
|
</v-btn>
|
|
|
|
<!-- Debugging -->
|
|
<!-- <ul>
|
|
<li v-for="(column, i) in subset" :key="`column-dyn${i}`">
|
|
{{ column }}
|
|
</li>
|
|
</ul> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// Inspiration: https://github.com/byteboomers/vue-lpage
|
|
export default {
|
|
computed: {
|
|
page() {
|
|
return this.$store.state.columnBrowser.page
|
|
},
|
|
isFirstPage() {
|
|
return this.$store.getters['columnBrowser/isFirstPage']
|
|
},
|
|
isLastPage() {
|
|
return this.$store.getters['columnBrowser/isLastPage']
|
|
},
|
|
totalPages() {
|
|
return this.$store.getters['columnBrowser/totalPages']
|
|
},
|
|
subset() {
|
|
return this.$store.getters['columnBrowser/subset']
|
|
},
|
|
},
|
|
methods: {
|
|
changePage(direction) {
|
|
this.$store.dispatch('columnBrowser/changePage', direction)
|
|
},
|
|
},
|
|
}
|
|
</script>
|