Slick.js 未加载到 vue 组件中

Question

我在 vue 中制作了一个轮播组件。 我用过 Slick.js slider。 现在的问题是 slick.js 没有被加载，我面临以下错误。

jquery-3.3.1.slim.min.js:2 Uncaught TypeError: $(...).slick is not a function

即使我使用过Slick.js CDN ，但仍然面临同样的错误。 在正常的 html 文件中，它可以正常工作。 但是在 vue 中我遇到了这个问题。我检查了 jquery 也可以正常工作。 只有 slick.js 没有被加载。 这是我的Vue组件

<template>
   <section class="feature-sound">
     <div class="container">
       <div class="tile-text-area">
         <h2 class="mb-0 cairo-title">Explore Sounds by</h2>
       </div>
          <ul class="list-unstyled tab-list">
             <li><div class="explore-tab-1 tab-item active">Location</div></li>
             <li><div class="explore-tab-2 tab-item ">Categories</div></li>
             <li><div class="explore-tab-3 tab-item ">Tags</div></li>
          </ul>

             <div class="explore-tab-1-area animate__animated animate__fadeIn">
                <section class="regular1 slider">
                <div class="tab-slider-element r-r-border">
                 <img :src="'assets/img/abdeen-01.png'">
                 <a class="slider-link" href="#">Abdeen</a>
                </div>
                <div class="tab-slider-element r-r-border">
                  <img :src="'assets/img/abdeen-01.png'">
                 <a class="slider-link" href="#">Abdeen</a>
                </div>
                <div class="tab-slider-element r-r-border">
                  <img :src="'assets/img/abdeen-01.png'">
                 <a class="slider-link" href="#">Abdeen</a>
                </div>
                <div class="tab-slider-element r-r-border">
                  <img :src="'assets/img/abdeen-01.png'">
                 <a class="slider-link" href="#">Abdeen</a>
                </div>
                <div class="tab-slider-element r-r-border">
                  <img :src="'assets/img/abdeen-01.png'">
                 <a class="slider-link" href="#">Abdeen</a>
                </div>
                <div class="tab-slider-element r-r-border">
                  <img :src="'assets/img/abdeen-01.png'">
                 <a class="slider-link" href="#">Abdeen</a>
                </div>
                <div class="tab-slider-element r-r-border">
                  <img :src="'assets/img/abdeen-01.png'">
                 <a class="slider-link" href="#">Abdeen</a>
                </div>
                <div class="tab-slider-element r-r-border">
                  <img :src="'assets/img/abdeen-01.png'">
                 <a class="slider-link" href="#">Abdeen</a>
                </div>
                <div class="tab-slider-element r-r-border">
                  <img :src="'assets/img/abdeen-01.png'">
                 <a class="slider-link" href="#">Abdeen</a>
                </div>
                <div class="tab-slider-element r-r-border">
                  <img :src="'assets/img/abdeen-01.png'">
                 <a class="slider-link" href="#">Abdeen</a>
                </div>
                <div class="tab-slider-element r-r-border">
                  <img :src="'assets/img/abdeen-01.png'">
                 <a class="slider-link" href="#">Abdeen</a>
                </div>
              
              </section>
             </div>
             <div class="explore-tab-2-area   animate__animated animate__fadeIn">
                <section class="regular2  slider">
                <div class="tab-slider-element r-r-border">
                   <button class="btn slider-inner-btn">ECONOMIC</button>
                </div>
                <div class="tab-slider-element r-r-border">
                   <button class="btn slider-inner-btn">SOCIAL</button>
                </div>
                <div class="tab-slider-element r-r-border">
                   <button class="btn slider-inner-btn">RELIGIOUS</button>
                </div>
                <div class="tab-slider-element r-r-border">
                  <button class="btn slider-inner-btn">TRANSPORTATION</button>
                </div>
                <div class="tab-slider-element r-r-border">
                   <button class="btn slider-inner-btn">WILDLIFE</button>
                </div>
                <div class="tab-slider-element r-r-border">
                  <button class="btn slider-inner-btn">ECONOMIC</button>
                </div>
                <div class="tab-slider-element r-r-border">
                   <button class="btn slider-inner-btn">ECONOMIC</button>
                </div>
                <div class="tab-slider-element r-r-border">
                   <button class="btn slider-inner-btn">ECONOMIC</button>
                </div>
                <div class="tab-slider-element r-r-border">
                  <button class="btn slider-inner-btn">ECONOMIC</button>
                </div>
                <div class="tab-slider-element r-r-border">
                   <button class="btn slider-inner-btn">ECONOMIC</button>
                </div>
                <div class="tab-slider-element r-r-border">
                  <button class="btn slider-inner-btn">ECONOMIC</button>
                </div>
                <div class="tab-slider-element r-r-border">
                   <button class="btn slider-inner-btn">ECONOMIC</button>
                </div>
                <div class="tab-slider-element r-r-border">
                   <button class="btn slider-inner-btn">ECONOMIC</button>
                </div>
                <div class="tab-slider-element r-r-border">
                  <button class="btn slider-inner-btn">ECONOMIC</button>
                </div>
                <div class="tab-slider-element r-r-border">
                   <button class="btn slider-inner-btn">ECONOMIC</button>
                </div>
                <div class="tab-slider-element r-r-border" >
                  <button class="btn slider-inner-btn">ECONOMIC</button>
                </div>
              </section>
             </div>
             <div class="explore-tab-3-area  animate__animated animate__fadeIn">
                <section class="regular3 slider">
                
                <div class="tab-slider-element ">
                  <div class="tab-slider-small-box r-r-border">
                    
                  </div>
                  <div class="tab-slider-small-box r-r-border">
                    
                  </div>
                  
                </div>
                <div class="tab-slider-element ">
                  <div class="tab-slider-small-box r-r-border">
                    
                  </div>
                  <div class="tab-slider-small-box r-r-border">
                    
                  </div>
                  
                </div>
                <div class="tab-slider-element ">
                  <div class="tab-slider-small-box r-r-border">
                    
                  </div>
                  <div class="tab-slider-small-box r-r-border">
                    
                  </div>
                  
                </div>
                <div class="tab-slider-element ">
                  <div class="tab-slider-small-box r-r-border">
                    
                  </div>
                  <div class="tab-slider-small-box r-r-border">
                    
                  </div>
                  
                </div>
                <div class="tab-slider-element ">
                  <div class="tab-slider-small-box r-r-border">
                    
                  </div>
                  <div class="tab-slider-small-box r-r-border">
                    
                  </div>
                  
                </div>
                <div class="tab-slider-element ">
                  <div class="tab-slider-small-box r-r-border">
                    
                  </div>
                  <div class="tab-slider-small-box r-r-border">
                    
                  </div>
                  
                </div>
                <div class="tab-slider-element ">
                  <div class="tab-slider-small-box r-r-border">
                    
                  </div>
                  <div class="tab-slider-small-box r-r-border">
                    
                  </div>
                  
                </div>
                <div class="tab-slider-element ">
                  <div class="tab-slider-small-box r-r-border">
                    
                  </div>
                  <div class="tab-slider-small-box r-r-border">
                    
                  </div>
                  
                </div>
                <div class="tab-slider-element ">
                  <div class="tab-slider-small-box r-r-border">
                    
                  </div>
                  <div class="tab-slider-small-box r-r-border">
                    
                  </div>
                  
                </div>
              
              </section>
             </div>
           </div>
   </section>
</template>

<script>
export default {
  name: "ExploreSound"
}
</script>

<style scoped>

</style>

这是我们光滑的js代码

  $('.regular1').slick({
          dots: false,
          infinite: false,
          speed: 300,
          slidesToShow: 6,
          slidesToScroll: 4,
          responsive: [
            {
              breakpoint: 1024,
              settings: {
                slidesToShow: 4,
                slidesToScroll: 3,
              }
            },
          
            {
              breakpoint: 576,
              settings: {
                slidesToShow: 2,
                slidesToScroll: 2
              }
            }
            // You can unslick at a given breakpoint now by adding:
            // settings: "unslick"
            // instead of a settings object
          ]
});

   $(".regular2").slick({
        dots: false,
        infinite: true,
        slidesToShow: 5,
        navs:false,
        slidesToScroll: 3
      });
   $(".regular3").slick({
        dots: false,
        infinite: true,
        slidesToShow: 6,
        navs:false,
        slidesToScroll: 3
      });
   
  }); 

Answer 1

错误信息： TypeError: $(...).slick is not a function

一种解决方案是在无冲突模式下使用 jQuery。

例如：您的代码：

$(document).ready(function() { 
  $('a').click( function(event) {
    $(this).hide();
    event.preventDefault();
  });
});

noConflict 模式下的代码：

var $jq = jQuery.noConflict();
$jq(document).ready(function() { 
  $jq('a').click( function(event) {
    $jq(this).hide();
    event.preventDefault();
  });
});

解决方案在这里找到： http://zenverse.net/jquery-how-to-fix-the-is-not-a-function-error-using-noconflict/