Question

使用

Laravel 5.7
Buefy 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')

控制台中没有错误

Laravel-Vue和Javascript问题

0 个答案: