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

VueJS inicjacja wtyczki jQuery

0 głosów
570 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 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ź 220 wizyt
pytanie zadane 24 listopada 2017 w JavaScript przez Anoonymous Obywatel (1,560 p.)
0 głosów
1 odpowiedź 383 wizyt
pytanie zadane 19 listopada 2017 w JavaScript przez Anoonymous Obywatel (1,560 p.)
0 głosów
1 odpowiedź 352 wizyt
pytanie zadane 18 listopada 2017 w JavaScript przez Anoonymous Obywatel (1,560 p.)

93,427 zapytań

142,421 odpowiedzi

322,649 komentarzy

62,787 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

VMware Cloud PRO - przenieś swoją infrastrukturę IT do chmury
...