Правильная инициализация MaterializeCSS в проекте VueJS - PullRequest
Новая
       5

Правильная инициализация MaterializeCSS в проекте VueJS

0 голосов
/ 29 июня 2018

Я пытаюсь запустить FrameworkizeizeCSS без jQuery в проекте VueJS, созданном с помощью npm (vue init webpack projectname)

Начиная с версии 1.0.0-rc.2 Materialise поддерживает собственную инициализацию без jQuery, что-то вроде этого: 

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

Но при этом компоненты JS Materialize работают только после страницы руководства перезагрузка, и когда я открываю какой-то компонент и возвращаюсь к компоненту с материалом Materialise - это не работает - мне нужно снова и снова загружать страницу вручную.

Так как правильно запустить компоненты JS?

1 Ответ

0 голосов
/ 01 июля 2018

Это сработало для меня, так что вы можете попробовать это:

Перейдите в файл src/main.js и добавьте следующие строки (если предполагается, что вы используете npm): 

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

Лично я использую M.AutoInit() способ инициализации компонентов JS для каждого компонента vue, который в них нуждается: 

<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 вашего компонента вызовет их, только когда они полностью смонтированы.

...