I'm having an issue with my offCanvas sidebar which I used with mScrollBar. The issue is when navigate between pages offCanvas starts working but after page refresh, it will give the following issue:jquery.js?1157:4059 Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_3___default(...)(...).mCustomScrollbar is not a function
at HTMLDocument.eval (beginner.vue?186f:1218)
at mightThrow (jquery.js?1157:3766)
at process (jquery.js?1157:3834)
and Here is what I have tried.
首先，我已将必要的 jquery 函数安装到 mount 中，并将 mCustomScrollBar 外部 js 文件导入到脚本区域。这两件事以前对我有用。但是在vue js中，页面刷新后mCustomScrollBar功能不起作用。但是，如果我不刷新页面并在模板之间导航，它工作正常。我需要你关于这个问题的建议
navbar.vue
<template>
<nav id="sidebar">
<ul class="list-unstyled components">
<p></p>
<div id="dismiss">
<i class="fas fa-times left"></i>
</div>
<li id="active" class="active">
<a id="active"><i class="fa-fw fas fa-book fa-xs"></i> Программы</a>
<ul id="homeSubmenu">
<li>
<a href="en-beginner.html">Английский для начинающих</a>
</li>
<!-- <li>
<a href="#">Английский для среднего уровня</a>
</li> -->
<li>
<a href="https://ahoyla.com/ielts">Подготовка к IELTS</a>
</li>
</ul>
</li>
<li class="active">
<a id="active"><i class="fa-fw fas fa-user-graduate fa-xs"></i>Обучение</a>
<ul id="pageSubmenu">
<li>
<a class="off-canvas-item" href="https://lms.ahoyla.com/english-beginners">Начальный уровень</a>
</li>
<li>
<a class="off-canvas-item" href="https://lms.ahoyla.com/english-intermediate">Средний уровень</a>
</li>
<li>
<a class="off-canvas-item" href="https://lms.ahoyla.com/ielts-course-1">IELTS</a>
</li>
</ul>
</li>
<li class="active">
<a href="https://ahoyla.com/"><img class="li-image" src="../assets/images/ahoyla.png" width="20" height="15">Метод обучения Ahoyla</a>
</li>
<li class="active">
<a href="https://lms.ahoyla.com/plans-pricing"><img class="li-image" src="../assets/images/ahoyla.png" width="20" height="12">Тарифные планы</a>
</li>
</ul>
</nav>
<div class="overlay"></div>
</template>
<style scoped>
@import '../assets/fonts.css';
@import '../assets/fontawesome/css/fontawesome.min.css';
@import url(https://cdn.rawgit.com/mfd/09b70eb47474836f25a21660282ce0fd/raw/e06a670afcb2b861ed2ac4a1ef752d062ef6b46b/Gilroy.css);
nav .navbar .navbar-brand{
width: 100%; }
nav .navbar-image{
width: 120px;
margin: auto;
}
nav #navbar-mobile{
display: none;
}
#nav-link {
display: none;
}
.nav-item .nav-link {
font-size: 16px;
color: black;
font-weight: 700;
padding: 0 10px;
cursor: pointer;
}
.navbar .navbar-brand {
width: 200px;
}
.nav-item .profile-rounded {
border-radius: 50%;
width: 30px;
height: 30px;
margin-right: 8px; }
#sidebar {
width:375px;
position: fixed;
top: -20;
left: -380px;
height: 100vh;
z-index: 999;
background: #F8F8F6;
color: #fff;
transition: all 0.3s;
overflow-y: scroll;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
background-repeat: no-repeat;
padding: 20px;
}
#sidebar.active {
left: 0;
}
#sidebar #active{
background-image: none;
}
#dismiss {
width: 35px;
height: 35px;
line-height: 20px;
text-align: center;
color: #303C4A;
position: absolute;
top: 0;
right: 92%;
cursor: pointer;
-webkit-transition: all 0.1s;
-o-transition: all 0.1s;
transition: all 0.1s;
}
#dismiss:hover {
background: #fff;
color: #7386D5;
}
.overlay {
display: none;
position: fixed;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
z-index: 998;
opacity: 0;
transition: all 0.5s ease-in-out;
}
.overlay.active {
display: block;
opacity: 1;
}
#sidebar ul.components {
padding:8px 0 8px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul{
padding: 5px 0 7% 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul li a {
font-size: 16px;
display: block;
color: #303C4A;
padding: 5px;
/* background-image:url('../assets/images/line.png'); */
background-repeat: no-repeat;
background-position: right center;
}
.mobile-menu{
order:0;
}
.li-image{
margin-left: 0;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #303C4A;
font-weight: bold;
padding: 5px;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
</style>
<script>
import $ from 'jquery'
export default {
name:'navbar',
mounted(){
let sidebar = document.createElement('script')
sidebar.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js')
document.head.appendChild(sidebar)
$(document).ready(function(){$("#sidebar")
.mCustomScrollbar({theme:"minimal"})
,$("#dismiss, .overlay")
.on("click",function(){$("#sidebar")
.removeClass("active"),$(".overlay")
.removeClass("active")}),$("#sidebarCollapse")
.on("click",function(){$("#sidebar")
.addClass("active"),$(".overlay")
.addClass("active"),$(".collapse.in")
.toggleClass("in"),$("a[aria-expanded=true]")
.attr("aria-expanded","false")})});
},
}
</script>