Vue.js，如何导入和使用JQuery初始化materialize-css轮播

Posted 2023-02-22

【中文标题】Vue.js，如何导入和使用JQuery初始化materialize-css轮播

【英文标题】：Vue.js, how to import and use JQuery to initialize a materialize-css carousel

【发布时间】：2019-04-29 19:32:26

【问题描述】：

我正在尝试将materialize-css与Vue一起使用，一切正常，但是某些物化组件需要使用JS或Jquery初始化，现在，我之前没有使用Jquery，我使用@987654321安装它@，但我对如何以及在何处导入和使用它有点困惑。 下面的代码来自关于如何初始化轮播的具体化文档。非常感谢有关如何在 .vue 组件或任何替代方式中使用它的提示？

  document.addEventListener('DOMContentLoaded', function() 
    var elems = document.querySelectorAll('.carousel');
    var instances = M.Carousel.init(elems, options);
  );

  // Or with jQuery

  $(document).ready(function()
    $('.carousel').carousel();
  );
      

提前致谢。

【参考方案1】：

在你的组件中初始化mounted钩子中的代码而不使用jquery：

export default 
     ...
   mounted()
        document.addEventListener('DOMContentLoaded', function() 
        var elems = document.querySelectorAll('.carousel');
        var instances = M.Carousel.init(elems);
      );


    

【讨论】：

我收到一个参考错误，第一部分没有定义选项，第二部分，类型错误 .carousel 不是函数，我想我应该使用其中的一个文档中间的评论设置中的这个或那个..不太确定我在这里缺少什么！

@MoSwilam 通常我会删除 options 参数，并且在 materialisecss 的最新版本中，不需要 jquery，我已经更新了我的答案

虽然有些东西还是不对，但至少现在屏幕上显示出来了，非常感谢:)。

我猜在物化类或其他东西中存在两个小问题，项目不会自动滑动，我的意思是我必须手动移动每个项目，而且即使我有中心类，项目也没有正确居中在每个轮播项目中。知道我可能会丢失什么，或者您想查看代码本身吗？

可以把相关部分发到codesandbox.io吗？为了调试它