ritchie46 · April 30, 2018 09:17
diff --git a/navigator.vue b/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>
	<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>