使用Turbolinks的Laravel Livewire侧边栏切换,在访问第二个页面时无法工作。

3
使用livewire和turbolinks创建应用程序,但现在我在应用程序中遇到了侧边栏切换器的问题。它显示“无法读取未定义的属性切换”。最初下拉菜单不起作用,我进行了研究并修复了下拉菜单,但现在出现了新的错误。我在我的应用程序js文件中找到了这个脚本。当我访问第二个页面时,侧边栏无法工作,因为它是SPA应用程序,所以我认为可能无法正确读取js,因此在主页面中添加了点击功能,但仍然显示相同的错误。

enter image description here

<script>
        document.addEventListener("turbolinks:load", function() {
            $('.dropdown-toggle').dropdown();
            $('.navbar-toggler').click(function(){
                "use strict";
                var t = document.querySelectorAll('[data-toggle="sidebar"]');
                (t = Array.prototype.slice.call(t)).forEach((function (t) {
                    t.addEventListener("click", (function (t) {
                        var e = t.currentTarget.getAttribute("data-target") || "#default-drawer",
                            o = document.querySelector(e);
                        o && o.mdkDrawer.toggle()
                    }))
                }));
                var e = document.querySelectorAll(".mdk-drawer");
                (e = Array.prototype.slice.call(e)).forEach((function (t) {
                    t.addEventListener("mdk-drawer-change", (function (t) {
                        if (t.target.mdkDrawer) {
                            document.querySelector("body").classList[t.target.mdkDrawer.opened ? "add" : "remove"]("has-drawer-opened");
                            var e = document.querySelector('[data-target="#' + t.target.id + '"]');
                            e && e.classList[t.target.mdkDrawer.opened ? "add" : "remove"]("active")
                        }
                    }))
                })), $(".sidebar .collapse").on("show.bs.collapse", (function (t) {
                    t.stopPropagation(), $(this).parent().closest("ul").find(".open").find(".collapse").not(this).collapse("hide"), $(this).closest("li").addClass("open")
                })), $(".sidebar .collapse").on("hidden.bs.collapse", (function (t) {
                    t.stopPropagation(), $(this).closest("li").removeClass("open")
                }))

            });
        })
</script>

侧边栏切换按钮------------

<button class="navbar-toggler w-auto mr-16pt d-block rounded-0" type="button" data-toggle="sidebar" data-turbolinks-eval=false>
 <span class="material-icons">short_text</span>
</button>

侧边栏 ------------

<!-- drawer -->
<div class="mdk-drawer js-mdk-drawer" id="default-drawer" data-turbolinks-eval=false>
    <div class="mdk-drawer__content">
        <div class="sidebar sidebar-dark-dodger-blue sidebar-left" data-perfect-scrollbar>


            <div class="d-flex align-items-center navbar-height">
                <form action="" class="search-form search-form--black mx-16pt pr-0 pl-16pt">
                    <input type="text" class="form-control pl-0" placeholder="Search">
                    <button class="btn" type="submit"><i class="material-icons">search</i></button>
                </form>
            </div>



            <a href="fixed-index.html" class="sidebar-brand ">
                <!-- <img class="sidebar-brand-icon" src="assets/images/illustration/student/128/white.svg" alt="Luma"> -->

                <span class="avatar avatar-xl sidebar-brand-icon h-auto">

                    <span class="avatar-title rounded bg-primary"><img src="{{ asset('assets/images/illustration/student/128/white.svg') }}" class="img-fluid" alt="logo" /></span>

                </span>
                <span>Logic Edx</span>
            </a>
            <div class="sidebar-heading">Student</div>
            <ul class="sidebar-menu">


                <li class="sidebar-menu-item @if(Request::route()->getName() == 'home') active @endif ">
                    <a class="sidebar-menu-button" href="{{ route('home') }}">
                        <span class="material-icons sidebar-menu-icon sidebar-menu-icon--left">home</span>
                        <span class="sidebar-menu-text">Home</span>
                    </a>
                </li>
                <li class="sidebar-menu-item @if(\Request::route()->getName() == 'test-series.index')active @endif">
                    <a class="sidebar-menu-button" href="{{ route('test-series.index') }}">
                        <span class="material-icons sidebar-menu-icon sidebar-menu-icon--left">local_library</span>
                        <span class="sidebar-menu-text">Browse Test-Series</span>
                    </a>
                </li>
                <li class="sidebar-menu-item @if(\Request::route()->getName() == 'free.test-series.index')active @endif">
                    <a class="sidebar-menu-button" href="{{ route('free.test-series.index') }}">
                        <span class="material-icons sidebar-menu-icon sidebar-menu-icon--left">style</span>
                        <span class="sidebar-menu-text">Free Test-Series</span>
                    </a>
                </li>
                @if(auth()->check())
                <li class="sidebar-menu-item">
                    <a class="sidebar-menu-button" href="fixed-student-my-courses.html">
                        <span class="material-icons sidebar-menu-icon sidebar-menu-icon--left">search</span>
                        <span class="sidebar-menu-text">My Test-Series</span>
                    </a>
                </li>
    
                <li class="sidebar-menu-item">
                    <a class="sidebar-menu-button" href="fixed-student-quiz-result-details.html">
                        <span class="material-icons sidebar-menu-icon sidebar-menu-icon--left">live_help</span>
                        <span class="sidebar-menu-text">Result</span>
                    </a>
                </li>
                @endif
            </ul>
        </div>
    </div>
</div>
2个回答

3
你需要在下拉菜单中添加"data-no-turbolink"才能使它们正常工作。

0

我也遇到了Turbolinks和Bootstrap的问题,但我通过以下方式解决了这个问题:

  1. 从app.js中删除Turbolinks,并将app.js放在布局页面的“head”中。app.js包括Bootstrap、jQuery等内容。

  2. 在另一个js文件(例如:turbo.js)中调用Turbolinks,并将此文件放在布局页面的“body”中。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接