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

Question

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 ;
      }
    },

 

 

Answer 1

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?

Comments

To co powinno - maile użytkowników:

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

---

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.

---

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>