doccano/frontend/components/tasks/toolbar/ToolbarMobile.vue

<template>
  <v-bottom-navigation
    app
    absolute
    hide-on-scroll
  >
    <v-btn
      :disabled="isFirstPage"
      @click="updatePage(page - 1)"
    >
      <span>Prev</span>
      <v-icon>{{ mdiChevronLeft }}</v-icon>
    </v-btn>

    <v-btn
      :disabled="isLastPage"
      @click="updatePage(page + 1)"
    >
      <span>Next</span>
      <v-icon>{{ mdiChevronRight }}</v-icon>
    </v-btn>
  </v-bottom-navigation>
</template>

<script lang="ts">
import Vue from 'vue'
import { mdiChevronLeft, mdiChevronRight } from '@mdi/js'

export default Vue.extend({
  props: {
    total: {
      type: Number,
      default: 1,
      required: true
    }
  },

  data() {
    return {
      mdiChevronLeft,
      mdiChevronRight
    }
  },

  computed: {
    page(): number {
      // @ts-ignore
      return parseInt(this.$route.query.page, 10)
    },
    isFirstPage(): boolean {
      return this.page === 1
    },
    isLastPage(): boolean {
      return this.page === this.total || this.total === 0
    }
  },

  methods: {
    updatePage(page: number) {
      this.$router.push({ query: { page: page.toString() }})
    }
  }
})
</script>