VueJS 项目中正确的 MaterializeCSS 初始化

Question

我尝试在使用 npm ( )创建的 VueJS 项目中不使用 jQuery初始化 MaterializeCSS 框架vue init webpack projectname

从版本1.0.0-rc.2Materialize 开始支持它自己的初始化而不使用 jQuery，就像这样：

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.collapsible');
    var instances = M.Collapsible.init(elems, options);
  });

但是通过这种方式，JS Materialize Components 仅在手动页面重新加载后工作，并且当我打开某个组件并返回带有 Materialize 内容的组件时 - 它不起作用 - 我需要一直手动重新加载页面。

那么如何以正确的方式初始化 JS 组件呢？

Answer 1

它对我有用，所以你可能想试试这个：

转到您的src/main.js文件并添加以下行（如果假设您正在使用npm）：

import 'materialize-css/dist/js/materialize.min'

就我个人而言，我M.AutoInit()在每个需要它们的 vue 组件上使用初始化 JS 组件的方式：

import 'materialize-css/dist/js/materialize.min'

使用M.AutoInit()或

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.collapsible');
    var instances = M.Collapsible.init(elems, options);
  });

在mounted组件的函数内部将导致它们仅在完全安装时才被调用。