• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

VueJS inicjacja wtyczki jQuery

VPS Starter Arubacloud
0 głosów
394 wizyt
pytanie zadane 8 marca 2018 w JavaScript przez Anoonymous Obywatel (1,560 p.)
edycja 8 marca 2018 przez Anoonymous

Potrzebuję podpiąć wtyczkę jQuery pod aplikację VueJS-cli. Dodaje pliki do index.html i wszystko działa poprawnie, jednak podczas korzystania z routera, a dokładnie wracanie do lokalizacji w której jest użyty jQuery nie działa, tak jakby nie był wgl. inicjowany. Spotkał się ktoś z ową sytuacją?

index.html ma po prostu podpięte pliki, zaś komponent z owej strony:

<script>

$(document).ready(function() {
	$('#fullpage').fullpage({
   ...

  });
});
</script>

Jak widać nie używam tu instancji vue, czy tu może leżeć problem? Jak powinna wyglądać owa implementacja?

1 odpowiedź

+2 głosów
odpowiedź 8 marca 2018 przez niezalogowany
wybrane 9 marca 2018 przez Anoonymous
 
Najlepsza

Podczas korzystania z routingu, element #home jest niszczony. Wracając na tę stronę musisz reinicjalizować funkcje z jQuery.

Skorzystaj z metody lifecycle mounted. (Przydać Ci się mogą rónież vue-owe referencje do obiektów DOM)

komentarz 8 marca 2018 przez Anoonymous Obywatel (1,560 p.)

Zastosowałem mounted:

export default {
  mounted: function () {
    this.$nextTick(function () {
          $('#fullpage').fullpage({
            options

        });
    })
  }
}

jednak rezultat jest identyczny. Dodanie refa wyświetla komunikat, że this.$refs.fp.fullpage nie jest funkcją

komentarz 8 marca 2018 przez niezalogowany
Pokaż kod komponentu, w którym jest #home
komentarz 8 marca 2018 przez Anoonymous Obywatel (1,560 p.)
 <template>
<div ref="fp" id="fullpage">

  <div class="section">
  ...
  </div>
  <div class="section">
  ...
  </div>
  <div class="section">
  ...
  </div>
</div>
</template>

<script>
export default {
  mounted: function () {
    this.$nextTick(function () {
          $('#fullpage').fullpage({
            options
 
        });
    })
  }
}
</script>

tak wygląda komponent - domyślny html dla jQuery.FullPage

komentarz 8 marca 2018 przez niezalogowany
Okej, to jest templatka komponentu, jeszcze skrypty (bez cssa się obejdzie)
komentarz 8 marca 2018 przez Anoonymous Obywatel (1,560 p.)
tak wygląda cały komponent bez css ^^^
komentarz 8 marca 2018 przez niezalogowany
No dobra, wygląda podejrzanie, to już powinno śmigać. Konsola nic nie krzyczy? W ostateczności możesz mi jakoś podesłać cały kod
komentarz 8 marca 2018 przez Anoonymous Obywatel (1,560 p.)

przy wracaniu w konsoli wywala:

fullPage: Fullpage.js can only be initialized once and you are doing it multiple times!

jak rozumiem fullpage jest zainicjowany po przejściu

 

EDIT: https://github.com/alvarotrigo/fullPage.js/issues/2720    znalazłem chyba rozwiązanie problemu jednak nie wiem gdzie mam to dodać, zaraz przy rozpoczęciu mounted?

komentarz 8 marca 2018 przez niezalogowany
Pewnie nie usunąłeś wcześniejszego kodu js z index.html
komentarz 8 marca 2018 przez Anoonymous Obywatel (1,560 p.)
W index.html jest jedynie cdn do jquery, fullpage.js oraz css. Cały kod inicjujący jest w komponencie.
komentarz 9 marca 2018 przez niezalogowany
Od razu, czy dopiero, gdy wracasz na tę stronę?
komentarz 9 marca 2018 przez Anoonymous Obywatel (1,560 p.)

Rozwiązanie problemu:

export default {
  mounted: function () {
    this.$nextTick(function () {

      if (typeof $.fn.fullpage.destroy == 'function') {
          $.fn.fullpage.destroy('all');
      }

          $('#fullpage').fullpage({
            options

        });
    })
  }
}

Dzięki wielkie za naprowadzanie.

1
komentarz 9 marca 2018 przez niezalogowany

Użyj beforeDestroy - tam niszcz fullpage, pozbędziesz się tego dziwnego ifa.

Prawdopodobnie możesz wyjąć kod z nextTick bezpośrednio do funkcji mounted.

komentarz 9 marca 2018 przez niezalogowany

Ah, no i te refy -> zamiast szukać za każdym razem elementu w DOM -> po prostu podrzuć jego referencję do jquery

$(this.refs.fp).fullpage({
komentarz 9 marca 2018 przez Anoonymous Obywatel (1,560 p.)
export default {
  mounted: function () {
          $(this.$refs.fp).fullpage({
            options

        });
  },
  beforeDestroy: function () {
    $.fn.fullpage.destroy('all')
  }
}

Dzięki! końcowy kod.

Podobne pytania

0 głosów
1 odpowiedź 182 wizyt
pytanie zadane 24 listopada 2017 w JavaScript przez Anoonymous Obywatel (1,560 p.)
0 głosów
1 odpowiedź 301 wizyt
pytanie zadane 19 listopada 2017 w JavaScript przez Anoonymous Obywatel (1,560 p.)
0 głosów
1 odpowiedź 297 wizyt
pytanie zadane 18 listopada 2017 w JavaScript przez Anoonymous Obywatel (1,560 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...