javascript - Sidebar menu not working in Laravel+vue+adminlte - Stack Overflow

admin管理员组

文章数量:1327938

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?

• javascript
• css
• laravel
• vue.js
• adminlte

Share Improve this question Follow edited Nov 27, 2019 at 6:45 N'Bayramberdiyev 3,62099 gold badges3131 silver badges4646 bronze badges asked Nov 27, 2019 at 6:22 ppeguppegu 49222 gold badges1010 silver badges2323 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

When 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')

本文标签： javascriptSidebar menu not working in LaravelvueadminlteStack Overflow