Блог

итак, у меня есть проект laravel с sb-admin-2 и Vue.js

как вы можете видеть, когда я использую элемент #app в виде блейда для всей HTML-страницы, боковая панель 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',
});
  

только когда я удаляю vue.js из app.js затем кнопка снова работает.

Я наконец нашел ответ.

проблема заключалась в загрузке файлов Vue javascript после jquery и sb-admin-2, поэтому DOM не был отрисован для jquery или чего-то подобного:

правильный способ включения скриптов состоял в том, чтобы сначала импортировать 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>