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

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ą

---

Pokaż kod komponentu, w którym jest #home

---

 <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

---

Okej, to jest templatka komponentu, jeszcze skrypty (bez cssa się obejdzie)

---

tak wygląda cały komponent bez css ^^^

---

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

---

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?

---

Pewnie nie usunąłeś wcześniejszego kodu js z index.html

---

W index.html jest jedynie cdn do jquery, fullpage.js oraz css. Cały kod inicjujący jest w komponencie.

---

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.