Laravel - Проблемы с Vue и Javascript - PullRequest
Новая
       46

Laravel - Проблемы с Vue и Javascript

3 голосов
/ 14 марта 2019

Использование

  • Ларавел 5.7
  • Буэфи 0,7,3
  • Vue 2.5.17

В моем проекте у меня есть боковая панель, в которой есть элементы, которые скользят вниз с помощью кода JavaScript ... а на моей странице у меня есть Tab из Buefy Теперь я замечаю, что каждая страница содержит какой-либо объект Vue ... код JavaScript не работает, поэтому элементы боковой панели не скользили вниз или вверх, как ожидалось ... но на других страницах он работает хорошо

show.blade.php (пример) 

@section('content')
<b-tabs>
    <b-tab-item label="Pictures">
       Lorem ipsum dolor sit amet.
    </b-tab-item>

    <b-tab-item label="Music">
       Lorem <br>
       ipsum <br>
    </b-tab-item>

</b-tabs>
@endsection

@section('scripts')
    <script>
        var app = new Vue({
            el: '#app',
            data: {
            }
        });
    </script>
@endsection

sidebar.blade 

<div class="side-menu" id="admin-side-menu">
    <aside class="menu">
        <p class="menu-label">
            General
        </p>
        <!--./menu-label-->

        <ul class="menu-list">
            <a href="{{route('dashboard.index')}}" class="{{Nav::isRoute('dashboard.index')}}">
                <span class="icon"><i class="fas fa-tachometer-alt m-l-5"></i></span>{{__('site.dashboard')}}
            </a>
        </ul>

        <p class="menu-label">
            Content
        </p>
        <!--./menu-label-->

        <ul class="menu-list">
            <li>
                <a href="{{route('dashboard.users.index')}}" class="{{Nav::isResource('users')}}">
                    <span class="icon"><i class="fas fa-users m-l-5"></i></span>{{__('site.users')}}
                </a>
            </li>
        </ul>

        <p class="menu-label">
            Administration
        </p>

        <ul class="menu-list">
            <li>
                <a class="has-submenu {{Nav::hasSegment(['roles', 'permissions'], 2)}}">
                    <span class="icon"><i class="fas fa-cog m-l-5"></i></span>{{__('site.roles')}} و
                    {{__('site.permissions')}}
                </a>
                <ul class="submenu">
                    <li><a href="{{route('dashboard.roles.index')}}" class="{{Nav::isResource('roles')}}">{{__('site.roles_list')}}
                        </a></li>
                    <li><a href="{{route('dashboard.permissions.index')}}" class="{{Nav::isResource('permissions')}}">{{__('site.permissions_list')}}</a></li>
                </ul>
            </li>
        </ul>

    </aside>
</div>

Dashboard.js 

const accordions = document.getElementsByClassName('has-submenu')
function setSubmenuStyles(submenu, maxHeight, margins) {
    submenu.style.maxHeight = maxHeight
    submenu.style.marginTop = margins
    submenu.style.marginBottom = margins
}
for (var i = 0; i < accordions.length; i++) {
    if (accordions[i].classList.contains('is-active')) {
        const submenu = accordions[i].nextElementSibling
        setSubmenuStyles(submenu, submenu.scrollHeight + "px", "0.75em")
    }

    accordions[i].onclick = function () {
        this.classList.toggle('is-active')

        const submenu = this.nextElementSibling
        if (submenu.style.maxHeight) {
            // menu is open, we need to close it now
            setSubmenuStyles(submenu, null, null)
        } else {
            // meny is close, so we need to open it
            setSubmenuStyles(submenu, submenu.scrollHeight + "px", "0.75em")
        }
    }
}

App.js 

window.Vue = require('vue');

import Buefy from 'buefy'
Vue.use(Buefy)
require('./dashboard')

в консоли нет ошибок

...