在 VueJS 项目中正确的 MaterializeCSS 初始化

Question

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

从1.0.0-rc.2版本开始，Materialize 支持自己的初始化，无需 jQuery，smth 像这样：

  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组件：

<template>
  <div class="componentName">
    <!-- Some HTML content -->
  </div>
</template>


<script>
  export default {
    name: 'componentName',

    data() {
      return {
        // Some values
      };
    },

    mounted() {
      M.AutoInit(); // That way, it is only initialized when the component is mounted
    }
  }
</script>


<style scoped>
  /* Some CSS */
</style>

使用M.AutoInit() 或

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

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