Wczytywanie wielu danych z API - vuejs

Question

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))
     }
}

 

Comments

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.

---

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

Answer 1

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 ;)

 

Comments

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