侧边栏没有在 vue.js #app 元素内折叠（sb-admin-2）

Posted 2023-02-22

【中文标题】侧边栏没有在 vue.js #app 元素内折叠（sb-admin-2）

【英文标题】：sidebar not collapsing inside vue.js #app element (sb-admin-2)

【发布时间】：2020-12-13 09:30:24

【问题描述】：

所以我有 sb-admin-2 和 Vue.js 的 laravel 项目

您可以看到，当我在刀片视图中为整个 html 页面使用 #app 元素时，sb-admin-2 侧边栏不会折叠。

***NOTE*** this code is NOT working -> sidebar inside #app
-- this #app is for optional pages that using vue.js --
<div id="app"> ***NOTICE*************
    <div id="wrapper">

        <div id="content-wrapper" class="d-flex flex-column">

            <div id="content">

                <!-- Topbar -->
                <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

                    <!-- Sidebar Toggle (Topbar) --> ***NOTICE****************
                    <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
                        <i class="fa fa-bars"></i>
                    </button>

                </nav>
                <!-- End of Topbar -->


                @yield('content')

            </div>
            <!-- End of Main Content -->

        </div>
        <!-- End of Content Wrapper -->

    </div>
    <!-- End of Page Wrapper -->

</div>
-- end of #app element --

<!-- Bootstrap core javascript-->
<script src=" asset('js/admin/vendor/jquery/jquery.min.js') "></script>
<script src=" asset('js/admin/vendor/bootstrap/js/bootstrap.bundle.min.js') "></script>

<!-- Core plugin JavaScript-->
<script src=" asset('js/admin/vendor/jquery-easing/jquery.easing.min.js') "></script>

<!-- Custom scripts for all pages-->
<script src=" asset('js/admin/js/sb-admin-2.min.js') "></script>

<!-- Page level plugins -->
<script src=" asset('js/admin/vendor/chart.js/Chart.min.js') "></script>
<!-- vue.js  -->
<script src=" asset('js/app.js') "></script>

但是当我在不包括侧边栏切换器的较低级别上使用它时，它又可以工作了。

***NOTE*** this code is working -> sidebar is NOT inside #app
-- this #app is for optional pages that using vue.js --
<div id="wrapper">

    <div id="content-wrapper" class="d-flex flex-column">

        <div id="content">

            <!-- Topbar -->
            <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

                <!-- Sidebar Toggle (Topbar) --> ***NOTICE********************
                <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
                    <i class="fa fa-bars"></i>
                </button>

            </nav>
            <!-- End of Topbar -->

            <div id="app"> ***NOTICE***********************

                @yield('content')

            </div>
            -- end of #app element --
        </div>
        <!-- End of Main Content -->

    </div>
    <!-- End of Content Wrapper -->

</div>
<!-- End of Page Wrapper -->


<!-- Bootstrap core JavaScript-->
<script src=" asset('js/admin/vendor/jquery/jquery.min.js') "></script>
<script src=" asset('js/admin/vendor/bootstrap/js/bootstrap.bundle.min.js') "></script>

<!-- Core plugin JavaScript-->
<script src=" asset('js/admin/vendor/jquery-easing/jquery.easing.min.js') "></script>

<!-- Custom scripts for all pages-->
<script src=" asset('js/admin/js/sb-admin-2.min.js') "></script>

<!-- Page level plugins -->
<script src=" asset('js/admin/vendor/chart.js/Chart.min.js') "></script>
<!-- vue.js  -->
<script src=" asset('js/app.js') "></script>

加载页面或单击侧边栏切换器时没有错误没有警告。

当侧边栏切换器位于 vue.js #app 内时，jquery(sb-admin-2) 不知道此按钮上存在任何点击事件。

这是我的 laravel bootstrap.js 文件：

window._ = require('lodash');

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

这是我的 laravel app.js 源文件：

require('./bootstrap');

window.Vue = require('vue');

Vue.component('branches-component', require('./components/BranchesComponent.vue').default);


const app = new Vue(
    el: '#app',
);

只有当我从 app.js 中删除 vue.js 时，按钮才会再次起作用。

【问题讨论】：

有谁知道一些好的简单的免费 css 框架，比如 bootstrap4，它的管理模板不使用 jquery 等库？

最好的答案是：即使不使用 twitter-bootstrap 也不要使用 JQUERY。

【参考方案1】：

我终于找到了答案。

问题是在 jquery 和 sb-admin-2 之后加载 Vue javascript 文件，因此没有为 jquery 或类似的东西渲染 DOM：

包含脚本的正确方法是先导入 Vue，然后再导入 jquery、admin-sb-2 等...

<!-- Vue.js  should first-->
<script src=" asset('js/app.js') "></script>

<!-- jquery and admin-sb-2 , etc... -->
<script src=" asset('js/admin/vendor/jquery/jquery.min.js') "></script>
<script src=" asset('js/admin/vendor/bootstrap/js/bootstrap.bundle.min.js') "></script>
<script src=" asset('js/admin/vendor/jquery-easing/jquery.easing.min.js') "></script>
<script src=" asset('js/admin/js/sb-admin-2.min.js') "></script>
<script src=" asset('js/admin/vendor/chart.js/Chart.min.js') "></script>