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

question-closed Wczytywanie wielu danych z API - vuejs

Aruba Cloud - Virtual Private Server VPS
0 głosów
539 wizyt
pytanie zadane 10 sierpnia 2022 w JavaScript przez jakubjordanek Obywatel (1,340 p.)
zamknięte 3 września 2022 przez jakubjordanek

Cześć, od jakiegoś czasu nie mogę znaleźć rozwiązania do swojego problemu, otóż próbuję wczytać wiele danych ze swojego API, w sensie np. wszystkich użytkowników i wypisać je za pomocą vuejs. Wszystko dzieje się wewnątrz jednego skryptu. Z pobieraniem pojedynczych danych jak np. jeden użytkownik nie ma problemu. Przeczesałem wszystkie strony i nie mogę znaleźć rozwiązania, poniżej zamieszczam kod.

<tr v-for="person in persons" :key="person.id">
     <td>{{ person.name }}</td>
     <td>{{ person.surname }}</td>
     <td>{{ person.email }}</td>
</tr>
import axios from 'axios';

export default {
     data() {
          return {
               persons: []
          };
     },
     created: function() {
          axios
               .get('api')
               .then(res => {
                    this.persons = res.data
               })
               .catch(error => console.log(error))
     }
}

 

komentarz zamknięcia: x
komentarz 10 sierpnia 2022 przez ScriptyChris Mędrzec (190,190 p.)
Skoro nie masz problemu z wczytaniem jednego użytkownika, to co sprawia problem przy wczytaniu wszystkich? Zazwyczaj, do pobierania konkretnego obiektu, wskazuje się w parametrze jego identyfikator (lub cokolwiek, po czym serwer może go rozpoznać). Więc pobranie wszystkich powinno być o tyle prostsze, że nie trzeba przekazywać tego parametru.

Jaką odpowiedź z serwera otrzymujesz teraz? Pokaż endpointy dla użytkownika po stronie backendu.
komentarz 10 sierpnia 2022 przez jakubjordanek Obywatel (1,340 p.)
Chodzi mi o to, że w data gdy zamiast tablicy stworzę np. person = null i dane wyświetlam bez żadnego v-for tylko po prostu wpisując je w odpowiednim miejscu wyswietla się bez problemu jednak gdy chce wszystkie dane wrzucić do tablicy i za pomocą v-for je wyświetlić to nie chce działać w konsoli mi pokazuje że wszystko pobiera się poprawnie

1 odpowiedź

0 głosów
odpowiedź 10 sierpnia 2022 przez lnkoc Stary wyjadacz (13,960 p.)
edycja 10 sierpnia 2022 przez lnkoc

Przeczesałem wszystkie strony

Kiedyś też miałem takie wrażenie, ale jak się okazuje rozwiązanie bywa prostsze. Jeśli:

Z pobieraniem pojedynczych danych jak np. jeden użytkownik nie ma problemu.

To sprawdź swój backend i wspóbuj wypisać wszystkie dane w tabeli jaką otrzymujesz w jednej zmiennej np. w console.log(Ta_zmienna) i następnie spróbuj ją wyświetlić w html nadal jako jedną zmienną. Dopiero kolejnym etapem będzie zrobienie tabelki, jaką widać w kodzie powyżej (Moim zdaniem :key nie jest obowiązkowy, ale to tylko moje zdanie ;).

EDIT: SŁOWEM, o którym zapomniałem na wstępie jest: Dziel problem na mniejsze i rządź (rozwiązuj mniejsze problemy ;)

 

komentarz 11 sierpnia 2022 przez jakubjordanek Obywatel (1,340 p.)
doszedłem do tego, że problem polega na tym, że najpierw jest generowana za pomocą v-for ta pusta tablica, potem wszystkie dane są do niej poprawnie dodawane (sprawdzam to za pomocą console.log), ale ta tablica już się potem nie odświeża, może ty wiesz jakby można było sprawić, żeby wyświetlone dane zaktualizowały się po dodaniu danych, a może masz jakiś inny sposób na ogranie tego

 

EDIT: jak np. dodaje ręcznie dane do tablicy, to normalnie się wyświetla

Podobne pytania

0 głosów
0 odpowiedzi 206 wizyt
0 głosów
1 odpowiedź 506 wizyt
pytanie zadane 2 maja 2021 w JavaScript przez Bakkit Dyskutant (7,600 p.)

93,324 zapytań

142,323 odpowiedzi

322,390 komentarzy

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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...