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

Vue + Api platform, zaciaganie danych o uzytkowniku w petli v-for

0 głosów
30 wizyt
pytanie zadane 22 sierpnia w JavaScript przez Piotr Zakrzewski Obywatel (1,160 p.)

Witajcie,

Buduje prosta aplikacje w ramach nauki vue,

w api platform mam dwa tabele, User oraz Book, kazdy User po zarejestrowaniu i zalogowaniu sie do aplikacji moze dodac wpis o ksiazce w tabeli.

W bazie relacja pomiedzy book a user jest ManyToOne, po pobraniu danych wyswietla mi sie ścieżka do endpointu z użytkownikiem.

chciałbym pobierac caly obiekt z uzytkownikiem dla kazdego wiersza i np w polu doda wyswietlac mail dodajacego,

tabela:

 <tbody>
              <tr :key="key" v-for="(book, key) in books">
                <th>{{ key }}</th>
                <td>{{ book.id }}</td>
                <td>{{ book.ISBN }}</td>
                <td>{{ book.title }}</td>
                <td>{{ book.description }}</td>
                <td>{{ book.publicationDate }}</td>
                <td>{{ getBookOwner(book.user) }}</td>
                <td>{{ book.user }}</td>
                <td>
                  <i @click="remove(book.id)" class="far fa-trash-alt"></i>
                  &nbsp;
                  <i class="fas fa-edit"></i>
                  <i class="fas fa-search"></i>
                </td>
              </tr>
            </tbody>

 

Stworzyłem metode getBookOwner lecz zwraca mi ona [object Promie] :

    async getBookOwner(id) {
      if (id !== undefined) {
        let endpoint = id.split("/");
        endpoint = "/" + endpoint[4] + "/" + endpoint[5];
        const userData = await this.axios.get(endpoint, this.Bearer);
        const return = userData.data.email;
        console.log(return);
        return return ;
      }
    },

 

 

1 odpowiedź

0 głosów
odpowiedź 22 sierpnia przez ScriptyChris Mędrzec (168,460 p.)

Nie używaj słówka return dla nazw zmiennych, ponieważ to jest zarezerwowane słówko w ECMAScript. Czy konsola przeglądarki coś pokazuje? Kod metody getBookOwner powinien rzucić błędem składniowym.

Usuń te return'y i wypisz po prostu do konsoli userData.data.email - co tam się znajduje?

komentarz 22 sierpnia przez Piotr Zakrzewski Obywatel (1,160 p.)

To co powinno - maile użytkowników:

usunąłem z metody return ale to nic nie zmieniło.

komentarz 22 sierpnia przez ScriptyChris Mędrzec (168,460 p.)

Ok, to żeby obsłużyć samego promisa, przypisz go do property komponentu i to property wyświetl w komponencie. Przykład: https://stackoverflow.com/a/49746754/4983840

Funkcja asynchroniczna zwraca promisa, więc wypadało by w templatce użyć await, ale nie wiem czy w Vue tak się da zrobić. Jeśli się nie da, to możesz zrobić to na zasadzie zaifowania danego fragmentu templatki i przy rozwiązaniu promisa w funkcji przestaw warunek - przykładowy kod w linku powyżej.

komentarz 22 sierpnia przez Piotr Zakrzewski Obywatel (1,160 p.)
edycja 22 sierpnia przez Piotr Zakrzewski
Hmm ok udało mi się dodać spinnera, lecz teraz jak mam wywołać ta funkcje i przekazać do niej 'symfonowy obiekt' który w tym miejscu mam w takiej postaci : /symfvue/backend/public/users/1 ?

wywołanie funkcji w created nic mi nie da bo i tak przekazywany id jest  undefined

 

Mam inny pomysł, najwygodniej dla mnie było by już na etapie pierwszego axiosa zaciągającego cala zawartość tabeli Book i wrzucając do obiektu Books dodatkowo dla pola User zaciągać cały obiekt Users. Z tego co pamiętam w samym Symfony tak to działało, jeżeli było powiazanie w encjach, to w twigu gdy wyświetliłem sobie jakiś obiekt to miałem dostęp do obiektów powiązanych tak jak bym tutaj wywołał np book.user.email w tagach <td>

Podobne pytania

0 głosów
1 odpowiedź 70 wizyt
pytanie zadane 17 marca w JavaScript przez mi-20 Stary wyjadacz (12,550 p.)
0 głosów
0 odpowiedzi 67 wizyt
0 głosów
1 odpowiedź 72 wizyt
pytanie zadane 1 czerwca 2019 w JavaScript przez kordix Gaduła (3,330 p.)

85,802 zapytań

134,588 odpowiedzi

298,790 komentarzy

56,697 pasjonatów

Advent of Code 2021

Top 15 użytkowników

  1. 504p. - rucin93
  2. 492p. - CC PL
  3. 472p. - nidomika
  4. 393p. - Whistleroosh
  5. 387p. - ScriptyChris
  6. 380p. - adrian17
  7. 348p. - TheLukaszNs
  8. 347p. - WhiskeyTaster
  9. 329p. - Argeento
  10. 326p. - Dagohar
  11. 290p. - Anonim 1794483
  12. 287p. - Klaudia
  13. 284p. - B4mbus
  14. 275p. - b0mbix
  15. 252p. - tokox
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...