JS wymaga przeładowania strony

Odpowiedz Nowy wątek
2018-11-12 00:42
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.

Pozostało 580 znaków

2018-11-12 08:02
0

magiczna kula podpowiada, ze blad popelniles w 72 linii kodu

Pozostało 580 znaków

2018-11-12 11:05
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, {});
    });
edytowany 3x, ostatnio: Bartek Stachowski, 2018-11-12 11:24

Pozostało 580 znaków

2018-11-12 11:52

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.

edytowany 3x, ostatnio: Markuz, 2018-11-12 13:15

Pozostało 580 znaków

2018-11-12 12:33
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

Pozostało 580 znaków

2018-11-12 12:48
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 :)

Odpowiedziałem wyżej - Markuz 2018-11-12 13:14

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

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