Within a menu component placed inside a view accessed through its own route (/how-it-works), I am facing an issue with the header component structure, outlined below:
<nav class="nav">
<ul class="top-menu">
<li v-for="menu in menuItems" v-bind:key="menu.id" v-bind:class="{'active' : menu.active}" v-on:click="setActiveMenu(menu)">
<router-link :to="menu.url">{{ menu.name }}</router-link>
</li>
</ul>
<div class="get-started">
<router-link to="/">Get Started</router-link>
</div>
</nav>
Upon visiting the route, it's noticed that even though menu.active is true, the corresponding active class doesn't get applied. However, when already within the /how-it-works route, the functionality works as expected, but only within that specific route. it appears to be a navigation issue between routes. The setActiveMenu function is structured as follows:
setActiveMenu: function(menu) {
for (let i = 0; i < this.menuItems.length; i++) {
this.menuItems[i].active = false;
}
menu.active = true;
}
Additionally, the menu array content is as follows:
menuItems: [
{
name: 'How It Works',
url: '/how-it-works',
id: 1,
active: false
},
{
name: 'Page 2',
url: '/',
id: 2,
active: false
},
{
name: 'Page 3',
url: '/',
id: 3,
active: false
},
{
name: 'Page 4',
url: '/',
id: 4,
active: false
},
{
name: 'Page 5',
url: '/',
id: 5,
active: false
},
{
name: 'Page 6',
url: '/',
id: 6,
active: false
}
]
The potential issue seems to lie in the treatment of the active state during component creation or when navigating between routes. How can I correctly manipulate the header in this scenario?