JS wymaga przeładowania strony

0

Witam serdecznie. Mam pewien problem, który niebywale mnie irytuje. Piszę mały projekt "familiada online" gdzie za framework wybrałem laravel i vue.js. Jako narzędzie do nadania stronie wyglądu posługuje się Materialize. Przy tworzeniu podstawowego layoutu( formularz rejestracji) chciałem skorzystać z "Select". Skopiowałem ze strony Materialize cały kod( inicjalizacje w js również, jest taka sama jak na stronie Materialize). Po wejściu na localhost i kliknięciu na przejście do formularza logowania naszym oczom ukazuje się form, a w miejscu w którym powinien być select widać tylko jego label. Po przeładowaniu strony (F5) wszystko śmiga już elegancko. Jako że założeniem projektu była likwidacja przeładowań kieruję do Państwa swoje pytanie. Czy gdzieś popełniłem błąd, a może po prostu nie da się zrobić aplikacji bez przeładowań korzystając z materialize. Proszę o pomoc i z góry dziękuje za poświęcony czas.

0

magiczna kula podpowiada, ze blad popelniles w 72 linii kodu

0

Nie dałem kodu bo wszystko jest tak samo jak w https://materializecss.com/select.html

Z resztą nie wiem co dokładniej wysłać bo nie wiem z czym związany może być błąd. Czy to wina routingu czy źle zaimportowałem materialize. Chociaż gdybym źle to zrobił to wgl by nie działało.

Próbowałem już importu za pomocą link i poprzez main.js czyli:

import xxx from 'materialize.min.js'
Vue.use(xxx);

Tutaj mamy select w materialize

<div class="input-field col s12 select selection">
                                <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>

I oczywiście jak się go inicjuje

document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('select');
        var instances = M.FormSelect.init(elems, {});
    });
1

Może łatwiej będzie Ci użyć https://vuetifyjs.com/en/?

A odnośnie Twojego problemu, to document.addEventListener('DOMContentLoaded', function() { wykona się tylko raz, podczas wczytania DOM, jak Vue doczytuje w locie inny komponent to nie wykonuje już zdarzenia DOMContentLoaded (dlatego komponenty z materialize nie są renderowane), możesz utworzyć https://vuejs.org/v2/guide/mixins.html i w nim robić to co robisz w DOMContentLoaded - ale nie wiem czy to najoptymalniejsze wyjście. Jak odświeżasz stronę z formularzem to wczyta się pierwszy formularz więc DOMContentLoaded wykona się jak już formularz będzie widoczny i podmieni wszystkie komponenty na te właściwe.

0

Sprawdziłem ale mam mały problem z wykorzystywaniem js

Tutaj mamy fragment mojego kodu

export default {
        data() {

            return {
                user: {
                    nickname: null,
                    email: null,
                    password: null,
                    password_confirmation: null,

A tutaj inicjację z vuetfiy

<script>
  export default {
    data: () => ({
      items: ['Foo', 'Bar', 'Fizz', 'Buzz']
    })
  }
</script>

Pytanie na teraz jak wsadzić to items żeby select normalnie to czytał. Próbowałem już tego ale chyba nie tędy droga:

 data() {

            return {
                user: {
                    nickname: null,
                    email: null,
                    password: null,
                    password_confirmation: null,

                    items: ['Foo', 'Bar', 'Fizz', 'Buzz']
                }
            }
        },

PS: vuetify normalnie zaimportowałem

0

Dobra udało mi się to zrobić tak by vuetify działało jednakże jeśli ktoś wie dlaczego JS nie chce śmigać bez odświeżania to zachęcam do odpowiedzi :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1