I have installed AminLte v3 using npm in my Laravel + vue project ad evrything is working great but when i click on the Side navbar main menu which is tagged as
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-users"></i>
<p>
Members
<i class="fas fa-angle-left right"></i>
<span class="badge badge-warning right">new:2</span>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<router-link :to="{name : 'members'}" class="nav-link">
<i class="fas fa-user-check nav-icon"></i>
<p>All</p>
</router-link>
</li>
<li class="nav-item">
<router-link :to="{name:'membersLatest'}" class="nav-link">
<i class="fas fa-user-plus nav-icon"></i>
<span class="badge badge-danger right">2</span>
<p>Latest</p>
</router-link>
</li>
<li class="nav-item">
<router-link :to="{name:'membersPending'}" class="nav-link">
<i class="fas fa-user-clock nav-icon"></i>
<p>Pending</p>
</router-link>
</li>
<li class="nav-item">
<router-link :to="{name:'membersSuspended'}" class="nav-link">
<i class="fas fa-user-lock"></i>
<span class="badge badge-danger right">2</span>
<p>Suspended</p>
</router-link>
</li>
</ul>
</li>
It is redirecting me to #
router path which is ing from
<a href="#" class="nav-link">
<i class="nav-icon fas fa-users"></i>
<p>
Members
<i class="fas fa-angle-left right"></i>
<span class="badge badge-warning right">new:2</span>
</p>
</a>
This part and it is not opening sub-menus inside the main-menu and I am including the navBar from a another vue ponent.
Can anybody give an idea how am I going to solve this?
I have installed AminLte v3 using npm in my Laravel + vue project ad evrything is working great but when i click on the Side navbar main menu which is tagged as
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-users"></i>
<p>
Members
<i class="fas fa-angle-left right"></i>
<span class="badge badge-warning right">new:2</span>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<router-link :to="{name : 'members'}" class="nav-link">
<i class="fas fa-user-check nav-icon"></i>
<p>All</p>
</router-link>
</li>
<li class="nav-item">
<router-link :to="{name:'membersLatest'}" class="nav-link">
<i class="fas fa-user-plus nav-icon"></i>
<span class="badge badge-danger right">2</span>
<p>Latest</p>
</router-link>
</li>
<li class="nav-item">
<router-link :to="{name:'membersPending'}" class="nav-link">
<i class="fas fa-user-clock nav-icon"></i>
<p>Pending</p>
</router-link>
</li>
<li class="nav-item">
<router-link :to="{name:'membersSuspended'}" class="nav-link">
<i class="fas fa-user-lock"></i>
<span class="badge badge-danger right">2</span>
<p>Suspended</p>
</router-link>
</li>
</ul>
</li>
It is redirecting me to #
router path which is ing from
<a href="#" class="nav-link">
<i class="nav-icon fas fa-users"></i>
<p>
Members
<i class="fas fa-angle-left right"></i>
<span class="badge badge-warning right">new:2</span>
</p>
</a>
This part and it is not opening sub-menus inside the main-menu and I am including the navBar from a another vue ponent.
Can anybody give an idea how am I going to solve this?
Share Improve this question edited Nov 27, 2019 at 6:45 N'Bayramberdiyev 3,6209 gold badges31 silver badges46 bronze badges asked Nov 27, 2019 at 6:22 ppeguppegu 4922 gold badges10 silver badges23 bronze badges 2- Please create snippet so we are trying to help you :) – jaydeep patel Commented Nov 27, 2019 at 6:45
- Snippest is not possible, cause it is working in .html file as preview here adminlte.io/themes/AdminLTE/index2.html – ppegu Commented Nov 27, 2019 at 6:52
2 Answers
Reset to default 8When you are hitting on another route instead of admitlte routes, the treeview selector is unable to find the element. When you push the url to redirect into adminlte , the treeview won't work because the selector is defined before element mounted.
To fix this problem define a mounted hook in the sidebar ponent.
mounted(){
$('[data-widget="treeview"]').Treeview('init');
}
in the bootstrap.js file put require('admin-lte')
below
require('bootstrap')