I have a Vue Js App with a side nav with a drop-down list. When I change the route from one of the dropdowns to a single li, the dropdown remains open until a page refresh. How do I re-render the nav component so that the dropdown li closes on route change? I read somewhere that adding :key="$route.fullPath" will do but the dropdown list won't open anymore if that is added to <router-view/>.
How do I make this work?
UPDATE: Below is my side nav code:
<template>
<nav class="navbar-default navbar-static-side" role="navigation" >
<div class="sidebar-collapse">
<ul class="nav metismenu" id="side-menu">
<li class="nav-header">
<div class="dropdown profile-element">
<a data-toggle="dropdown" class="dropdown-toggle" >
<span class="clear"> <span class="block m-t-xs"> <strong class="font-bold">David Williams</strong>
</span> <span class="text-muted text-xs block">Art Director <b class="caret"></b></span> </span> </a>
<ul class="dropdown-menu animated fadeInRight m-t-xs">
<li><a href="#">Logout</a></li>
</ul>
</div>
<div class="logo-element">
IN+
</div>
</li>
<li :class="{ 'active': $route.name === 'home' }">
<router-link :to="{ name: 'home' }">
<i class="fa fa-home"></i>
<span>Home</span>
</router-link>
</li>
<li :class="{ 'active': $route.name === 'about' }">
<router-link :to="{ name: 'about' }">
<i class="fa fa-book"></i>
<span>About</span>
</router-link>
</li>
<li :class="{ 'active': $route.name === 'news' || $route.name === 'contact'}">
<a ><i class="fa fa-bar-chart-o"></i> <span class="nav-label">Others</span><span class="fa arrow"></span></a>
<ul class="nav nav-second-level collapse">
<li :class="{ 'active': $route.name === 'news' }">
<router-link :to="{ name: 'news' }">
<span>News</span>
</router-link>
</li>
<li :class="{ 'active': $route.name === 'contact' }">
<router-link :to="{ name: 'contact' }">
<span>Contact</span>
</router-link>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</template>
<script>
export default {
name : "SideNav",
}
</script>
<style>
</style>
