Материализация JS не работает при первой загрузке - PullRequest
Новая
       7

Материализация JS не работает при первой загрузке

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

Я пытаюсь создать приложение для чата Vue.js SPA, и у меня возникли проблемы с Materialise CSS и JS.JS не работает при первой загрузке, и чтобы заставить его работать, мне нужно перезагрузить страницу.Не уверен, в чем проблема, поскольку в консоли нет ошибок.

Вот index.html: </p> <pre><code><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css"> <title>Chat</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script> </body> </html>

А вот компонентгде проблема: </p> <pre><code> <template> <div class="container reg"> <h1 class="text-centered">Registrace</h1> <form @submit.prevent="register"> * Another form fields * <div class="input-field col s12"> <select> <option value="" disabled selected>Choose your option</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select> <label>Materialize Select</label> </div> <input type="submit" value="Registrovat" /> </form> <router-link :to="{ name: 'login' }"> <button>Login</button> </router-link> </div> </template> <script> document.addEventListener('DOMContentLoaded', function() { var elems = document.querySelectorAll('select'); var instances = M.FormSelect.init(elems, null); }); export default { data: function () { return { }; }, methods: { Register () { } } } </script>

1 Ответ

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

Кажется, использование внешней библиотеки jQuery является анти-паттерном с Vue.js, потому что

Vue.js и jquery борются за то, как обрабатывается DOM.

Смотрите последний комментарий здесь

Я думаю, вам нужно установить его через npm, а затем вручную вставить css и js в процесс компиляции, потому что у меня былта же проблема с материализацией и ионизацией 3.

Если вы не хотите тратить времяПри поиске обходного способа импорта вручную css и js в процессе компиляции было бы лучше использовать более дружественные Vue решения , как это

Я изменил свой ответ надобавить еще одну полезную ссылку.Эта библиотека использует Materialize css и Vue.js для создания пользовательского интерфейса appcomponents.org

...