Vue pagination

Pagination.vue

<template>

    <nav>
        <ul class="pagination">
            <li>
                <a @click="paginationNumberClick(-1)"
                   aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li v-for="link in pagination_mask"
                v-if="paginationNumberRender(link) !== false"
                :class="{active: (paginationNumberRender(link) == current_page+1)}">
                <a @click="paginationNumberClick(link)">{{paginationNumberRender(link)}}</a>
            </li>
            <li>
                <a @click="paginationNumberClick(1)"
                   aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>

<!--
    Usage (in list component):
        <pagination v-model="current_page" :count="count"></pagination>
-->

</template>

<script>

    export default {
        mounted() {},
        props: {
            pagination_mask: {
                type: Array,
                default() {
                    return [-2,-1,0,1,2,]
                }
            },
            // page number given through v-model
            value: {
                required: true,
                default() {
                    return 0
                },
            },
            limit: {
                default() {
                    return 10
                }
            },
            count: {
                required: true,
                default() {
                    return 0
                }
            }
        },
        data() {
            return {
                current_page: this.value,
            }
        },
        methods: {
            paginationNumberRender: function (number) {
                // 0 page is 1st page for user
                if ((this.current_page + number) >= 0 && (this.count_pages > this.current_page + number))
                    return (this.current_page + number) + 1;
                else return false;
            },
            paginationNumberClick: function (number) {
                if ((this.current_page + number) >= 0)
                    this.current_page += number;

                this.$emit('input', this.current_page)
            },
        },
        computed: {
            count_pages: function () {
                return Math.ceil(this.count / this.limit);
            },
        },
    }

</script>