VueJS inicjacja wtyczki jQuery

Question

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?

Answer 1

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)

Comments

Od razu, czy dopiero, gdy wracasz na tę stronę?

---

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.

---

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

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

---

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({

---

export default {
  mounted: function () {
          $(this.$refs.fp).fullpage({
            options

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

Dzięki! końcowy kod.