Stud.IP: Pagination component for vue.js

Pagination.vue

<template>
    <div>
        <p :id="`pagination-label-${id}`" class="audible">
            Blättern
        </p>
        <ul class="pagination" role="navigation" :aria-labelledby="`pagination-label-${id}`">
            <li v-if="currentPage > 0" class="prev">
                <a href="#" @click.prevent="selectPage(currentPage - 1)">
                    <span class="audible">Eine Seite</span>
                    zurück
                </a>
            </li>
            <li v-for="(page, index) in pages" :key="index" :class="{divider: page > pages[index - 1] + 1, current: page === currentPage}">
                <a href="#" @click.prevent="selectPage(page)">{{ page + 1 }}</a>
            </li>
            <li v-if="currentPage < lastPage" class="next">
                <a href="#" @click.prevent="selectPage(currentPage + 1)" rel="next">
                    <span class="audible">Eine Seite</span>
                    weiter
                </a>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    props: {
        total: {
            type: Number,
            required: true
        },
        limit: {
            type: Number,
            default: 50
        },
        offset: {
            type: Number,
            default: 0
        }
    },
    data () {
        return {
            id: this.randomId(),
        };
    },
    methods: {
        randomId () {
            return Math.random().toString(36).substring(2, 15)
                 + Math.random().toString(36).substring(2, 15);
        },
        selectPage (page) {
            this.$emit('selected', page);
        }
    },
    computed: {
        pages () {
            return [
                1,
                this.currentPage - 2,
                this.currentPage - 1,
                this.currentPage,
                this.currentPage + 1,
                this.currentPage + 2,
                this.lastPage
            ].sort().filter(item => item >= 0 && item <= this.lastPage)
            .filter((value, index, self) => self.indexOf(value) === index);
        },
        lastPage () {
            return Math.floor(this.total / this.limit);
        },
        currentPage () {
            return Math.floor(this.offset / this.limit);
        }
    }
}
</script>
<style lang="scss" scoped>
.pagination {
    display: flex;

    li {
        padding: 0 0.8ex;
        &::before {
            content: '';
        }
        &.divider::before {
            border-right: 1px solid #000;
            content: '…';
            margin-right: 0.8ex;
            padding-right: 0.8ex;
        }
        &:not(:last-child) {
            border-right: 1px solid #000;
        }
    }
}
</style>