vue-navigation_component-side

navigator.vue

<template>
    <nav>
        <ul class="pagination">
            <li v-for="page in navs" class="page-item"
                 v-bind:class="{active: activeId === page.id}" v-bind:id="page.id">
                <a class="page-link" v-on:click="toggle">
                    {{ page.name }}
                </a>
            </li>
        </ul>
    </nav>

</template>

<script>
    export default {
        name: "navigator",
        props: ['navs', 'active'],
        data: function () {
            return {
                activeId: this.active
            }
        },
        methods: {
            toggle: function (e) {
                this.activeId = e.target.parentElement.id;
                this.$parent.$emit('activeNavigation', this.activeId);
            }
        }
    }
</script>

<style scoped>

</style>