VueJS - update data za pomocą Axios

pytanie zadane 5 września 2018 w C i C++ przez Matt_Z Nowicjusz (150 p.)

Tworzę aplikację wyświetlającą posty zależnie od wybranej kategorii. Komponent appMenu przesyła wybraną przez użytkownika kategorię poprzez $emit do rodzica (app.vue) gdzie jest przechowywana w data. Z tego rodzica zaś przekazuję kategorię poprzez props do komponentu showPosts. W komponencie showPosts w created() obsługiwane jest zapytanie przez Axios do API które zwraca wszystkie posty i przypisuję je do zmiennej w data tego komponentu.

Jednak gdy trzeba uaktualnić/wyświetlić posty z wybranej kategorii otrzymuję "błędne koło", tzn:
W komponencie showPosts otrzymuję nową wartość propsa kategoria i tam wykorzystuję beforeUpdate(). Robię ponowne zapytanie (używając URL z kategoria) i zwracam dane podmieniając nimi aktualne dane w data. Wtedy znów następuje uruchomienie beforeUpdate(), gdyż data została zaktualizowana i znów wykonuje się zapytanie które aktualizuje data. Czy powinienem czymś zastąpić beforeUpdate? Czy może nie w tym leży problem?

Wiem, że pytanie może wydawać się głupie, ale dopiero stawiam pierwsze kroki z Vue. Z góry dzięki za pomoc :)

1 odpowiedź

odpowiedź 5 września 2018 przez Igor Gawrys Stary wyjadacz (12,460 p.)
wybrane 6 września 2018 przez Matt_Z

Najlepsza

Możesz np. przesyłać dane poprzez base64 tu masz poradnik jak to zrobić bez base64 https://serversideup.net/uploading-files-vuejs-axios/. Ja stosuje base64.

komentarz 5 września 2018 przez Matt_Z Nowicjusz (150 p.)

No nie do końca o to mi chodzi, bo dane są tylko i wyłącznie pobierane przez Axios + przy każdym zapytaniu pobierana jest aktualna wersja (bo jest to plik json aktualizowany przez api). Chodzi mi jedynie o obsłużenie ponownego pobrania i nadpisania danych w komponencie bez występowania tamtych błędów

komentarz 5 września 2018 przez Igor Gawrys Stary wyjadacz (12,460 p.)

Czy mógłbyś w takim razie podać dokładny kod ?

komentarz 5 września 2018 przez Matt_Z Nowicjusz (150 p.)

Tutaj jest aktualna wersja z błędem:
link
Jeśli wolisz mogę wrzucić np. na codesandbox

Zwróć uwagę na to co się dzieje w konsoli

komentarz 5 września 2018 przez Igor Gawrys Stary wyjadacz (12,460 p.)

Czyli mam naprawić istniejące tam błędy czy dodać obsługę tego co chciałeś ?

komentarz 5 września 2018 przez Igor Gawrys Stary wyjadacz (12,460 p.)

Udało się zkompilować czy to wszystko czy coś jeszcze zrobić ?

komentarz 5 września 2018 przez Matt_Z Nowicjusz (150 p.)

Czyli pojawia się tylko jeden wynik w konsoli po wyborze kategorii, tak?

komentarz 5 września 2018 przez Igor Gawrys Stary wyjadacz (12,460 p.)

Tak już wysyłam link do github.

komentarz 5 września 2018 przez Igor Gawrys Stary wyjadacz (12,460 p.)

Wszystko naprawione link:https://github.com/igorgawrys/update_PROBLEM właśnie pracuje nad projektem vue z wykorzystaniem axios.

komentarz 5 września 2018 przez Matt_Z Nowicjusz (150 p.)

Nie wiem czy ja robię coś nie tak, ale po pobraniu repozytorium i skompilowaniu nadal pojawia się ten błąd (niekończące się zapytania od momentu załadowania aplikacji), a dodatkowo nie pobiera mi takich danych jakie potrzebuję.

https://imgur.com/ZJmkA4m

komentarz 5 września 2018 przez Igor Gawrys Stary wyjadacz (12,460 p.)

Tablica jest czyszczona a w konsoli są nadal stare dane co nie oznacza że są wyświetlane.

komentarz 5 września 2018 przez Matt_Z Nowicjusz (150 p.)

Tak, ale dosłownie co pół sekundy pojawia się nowy wynik pomimo tego, że nie wykonuję żadnej akcji na stronie

komentarz 5 września 2018 przez Igor Gawrys Stary wyjadacz (12,460 p.)
edycja 5 września 2018 przez Igor Gawrys

Dziwne nie ma żadnego elementu w godzie który mógłby to powodować u mnie tak się nie dzieje spróbuj w innej przeglądarce i wykorzystałeś limit dla konta programisty.

komentarz 5 września 2018 przez Matt_Z Nowicjusz (150 p.)

Wydaje mi się, że wiem: kiedy po zapytaniu aktualizuję zawartość articles w data, zostaje ponownie wywołana cała funkcja z zapytaniem axios (ta z beforeUpdate)

lifecycle hook vue

Natomiast dziwi mnie fakt, że pojawia się to tylko u mnie. Sprawdzę jeszcze jutro, bo dzisiaj już dostałem błąd, że wykorzystałem 1000 dostępnych zapytań do serwera na dzień

komentarz 5 września 2018 przez Igor Gawrys Stary wyjadacz (12,460 p.)

Ja także sprawdza jutro bo może ten błąd się nie pojawiać właśnie z tego powodu a z jakiej przeglądarki korzystasz bo chrome strasznie cachuje i zmiany są widoczne dopiero po dłuższym czasie.

komentarz 5 września 2018 przez Matt_Z Nowicjusz (150 p.)

Na screenie jest akurat najnowsza Mozilla, na Chromie działo się to samo, innych nie zdążyłem sprawdzić bo wykorzystałem ten limit

1	komentarz 5 września 2018 przez Igor Gawrys Stary wyjadacz (12,460 p.) Rozumiem to do postu wracamy jutro.

komentarz 6 września 2018 przez Igor Gawrys Stary wyjadacz (12,460 p.)

Działa ?

komentarz 6 września 2018 przez Matt_Z Nowicjusz (150 p.)

Nie miałem czasu nic w tym pogrzebać, twoja wersja jest najbardziej aktualna

komentarz 6 września 2018 przez Matt_Z Nowicjusz (150 p.)

I nie, nadal jest ten błąd, również w tej twojej. Możesz sobie sprawdzić uruchamiając aplikację - będziesz otrzymywał dziesiątki responsów w konsoli

1	komentarz 6 września 2018 przez Igor Gawrys Stary wyjadacz (12,460 p.) Masz racje przejże dokładnie kod i wyśle odpowiedź o 20:00

komentarz 6 września 2018 przez Igor Gawrys Stary wyjadacz (12,460 p.)

ZROBIONE ZARAZ WYŚLE KOD

komentarz 6 września 2018 przez Igor Gawrys Stary wyjadacz (12,460 p.)

Proszę: https://github.com/igorgawrys/update_PROBLEM

komentarz 6 września 2018 przez Matt_Z Nowicjusz (150 p.)

Super! Działa jak należy :)
Co ciekawe w międzyczasie samemu udało mi się to rozwiązać przenosząc funkcję created do App.vue oraz dodając tam do metod updateCountry oraz updateCategory cały kod z funkcją Axios, po czym wynik przekazuję propsem do komponentu showNews.

Natomiast skorzystam z twojego rozwiązania, bo wygląda mi na lepsze i czytelniejsze. Dzięki!