<template>
<div class="about">
<Header />
<h1>Welcome to the dashboard page</h1>
</div>
</template>
<script>
import Header from "../components/layout/Header.vue";
export default {
name: "dashboard",
components: { Header }
};
</script>
I have added the header component and am looking to dynamically change the active state of a menu item based on the user's current view. Any suggestions on how I can achieve this?
Snippet from header.vue
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item">Dashboard</a>
<a class="navbar-item">Building Overview</a>
<a class="navbar-item">Map View</a>
<a class="navbar-item">Log Out</a>
<a class="navbar-item">Import</a>
<a class="navbar-item">Export</a>
</div>
</div>