Vue2 pagination component draft

items-list.html

<!-- RAW declaration-->
<div class="vue-render">
  <pagination :total.number="55" :current.number="1" :per_page.number="16"></pagination>
</div>

<!-- inside wrapper -->
<div class="vue-render">
  <items-list-pages>
    <pagination :total.number="55" :current.number="1" :per_page.number="16"></pagination>
  </items-list-pages>
</div>

pagination.js

/**
 * Created by maynagashev on 24.04.17.
 */

(function() {

    var log = window.log.getLogger('moments:pagination');   log.setDefaultLevel('debug');

    Vue.component('pagination', {
        name:     'pagination',
        template: '#pagination-tpl',

        props: [
            'current',
            'per_page',
            'total'
        ],

        data: function () {
            return {};
        },

        methods: {
            prev: function() {
                this.open(this.prevPage);
            },
            next: function() {
                this.open(this.nextPage);
            },
            open: function(page) {
                this.emitOpen(page);
            },
            emitOpen: function(page) {
                log.debug("$emit('open', "+page+")");
                this.$emit('open', page);
            },
            getClass: function(page) {
                return {
                    active: (page===this.current)
                }
            }
        },

        computed: {
            pages: function() {
                return Math.ceil(this.total/this.per_page);
            },
            nextPage: function() {
                return (this.isLast) ? this.current : this.current+1;
            },
            prevPage: function() {
                return (this.isFirst) ? this.current : this.current-1;
            },
            isFirst: function() {
                return (this.current===1);
            },
            isLast: function() {
                return (this.current===this.pages);
            }
        },

        mounted: function() {


        }
    });
})();

pagination.tpl

<script type="text/html" id="pagination-tpl">
    <nav aria-label="Page navigation" v-show="(pages>1)">
        <ul class="pagination">
            <li v-show="!isFirst">
                <a href="#" aria-label="Previous" @click.prevent="prev">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li v-for="page in pages" :class="getClass(page)">
                <a href="#" @click.prevent="open(page)">{{ page }}</a>
            </li>
            <li v-show="!isLast">
                <a href="#" aria-label="Next" @click.prevent="next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</script>