Laravel Vue Spa - пользовательский js-скрипт отказывается работать

#javascript #jquery #laravel #vue.js #single-page-application

#javascript #jquery #laravel #vue.js #одностраничное приложение

Вопрос:

Недавно я установил новый проект Laravel Vue Spa, и я хотел использовать пользовательскую тему, шаблон CoolAdmin вместо той, которая прилагалась к проекту.

Но один из js-скриптов main.js это отказ от работы, загрузки или запуска. Поэтому меню гамбургеров, выпадающие меню и многие другие не работают. Я попытался скомпилировать файл с помощью Webpack.mix.js и даже импортировать скрипт в app.js и скомпилировал его, но это все равно не сработало.

Я не знаю, связана ли проблема с самим скриптом, но он очень хорошо работает в шаблоне без проекта laravel vue. Это сценарий

 (function ($) {
  // USE STRICT
  "use strict";

  // Dropdown 
  try {
    var menu = $('.js-item-menu');
    var sub_menu_is_showed = -1;

    for (var i = 0; i < menu.length; i  ) {
      $(menu[i]).on('click', function (e) {
        e.preventDefault();
        $('.js-right-sidebar').removeClass("show-sidebar");        
        if (jQuery.inArray(this, menu) == sub_menu_is_showed) {
          $(this).toggleClass('show-dropdown');
          sub_menu_is_showed = -1;
        }
        else {
          for (var i = 0; i < menu.length; i  ) {
            $(menu[i]).removeClass("show-dropdown");
          }
          $(this).toggleClass('show-dropdown');
          sub_menu_is_showed = jQuery.inArray(this, menu);
        }
      });
    }
    $(".js-item-menu, .js-dropdown").click(function (event) {
      event.stopPropagation();
    });

    $("body,html").on("click", function () {
      for (var i = 0; i < menu.length; i  ) {
        menu[i].classList.remove("show-dropdown");
      }
      sub_menu_is_showed = -1;
    });

  } catch (error) {
    console.log(error);
  }

  var wW = $(window).width();
    // Right Sidebar
    var right_sidebar = $('.js-right-sidebar');
    var sidebar_btn = $('.js-sidebar-btn');

    sidebar_btn.on('click', function (e) {
      e.preventDefault();
      for (var i = 0; i < menu.length; i  ) {
        menu[i].classList.remove("show-dropdown");
      }
      sub_menu_is_showed = -1;
      right_sidebar.toggleClass("show-sidebar");
    });

    $(".js-right-sidebar, .js-sidebar-btn").click(function (event) {
      event.stopPropagation();
    });

    $("body,html").on("click", function () {
      right_sidebar.removeClass("show-sidebar");

    });
 

  // Sublist Sidebar
  try {
    var arrow = $('.js-arrow');
    arrow.each(function () {
      var that = $(this);
      that.on('click', function (e) {
        e.preventDefault();
        that.find(".arrow").toggleClass("up");
        that.toggleClass("open");
        that.parent().find('.js-sub-list').slideToggle("250");
      });
    });

  } catch (error) {
    console.log(error);
  }


  try {
    // Hamburger Menu
    $('.hamburger').on('click', function () {
      $(this).toggleClass('is-active');
      $('.navbar-mobile').slideToggle('500');
    });
    $('.navbar-mobile__list li.has-dropdown > a').on('click', function () {
      var dropdown = $(this).siblings('ul.navbar-mobile__dropdown');
      $(this).toggleClass('active');
      $(dropdown).slideToggle('500');
      return false;
    });
  } catch (error) {
    console.log(error);
  }
})(jQuery);
(function ($) {
  // USE STRICT
  "use strict";

  // Load more
  try {
    var list_load = $('.js-list-load');
    if (list_load[0]) {
      list_load.each(function () {
        var that = $(this);
        that.find('.js-load-item').hide();
        var load_btn = that.find('.js-load-btn');
        load_btn.on('click', function (e) {
          $(this).text("Loading...").delay(1500).queue(function (next) {
            $(this).hide();
            that.find(".js-load-item").fadeToggle("slow", 'swing');
          });
          e.preventDefault();
        });
      })

    }
  } catch (error) {
    console.log(error);
  }

})(jQuery);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Пожалуйста, помогите, есть ли какой-либо другой способ заставить этот скрипт работать или запускать

ОТЛАДКА Итак, после некоторой отладки оказывается, что код перестает загружаться после цикла for и ”use strict” doesn’t work . Пожалуйста, помогите

Ответ №1:

Вы должны знать, что Laravel использует Mix для компиляции Js-кода (на основе Webpack). Поэтому я рекомендую вам загрузить main.js файл с помощью mix и импортировать Jquery непосредственно в ваш bootstrap.js , не используя CDN. ex:

 mix.scripts(['resources/js/main.js'], 'public/js')

Кроме того, вы должны загрузить Jquery перед любыми другими скриптами.