@postya

Как отобразить связанные данные из двух массивов во Vue?

Делаю запросы через axios и получаю два массива
Users, Posts
Users
Posts

Но данные этих массивов связаны по userId
Мне на странице нужно отобразить все записи из массивов. Название, текст и имя автора
Нащвание(title) и текст(body) берётся из массива posts
Имя автора(name) берётся из массива users

Как можно связать эти массивы и отобразить их данные?

Вот что есть на данный момент:

<b-container fluid="lg" class="mt-lg-5">
            <b-row class="d-flex justify-content-center">
                <b-col sm="4" v-for="(post) in posts" :key="post.id">
                    <b-card class="text-left mb-4">
                        <b-card-text class="text-primary font-weight-bolder">
                            {{post.title}}
                        </b-card-text>

                        <b-card-text>
                            {{post.body}}
                        </b-card-text>

                        <b-card-text class="mt-5 font-weight-bold text-black-50">
                            author
                        </b-card-text>
                    </b-card>
                </b-col>
            </b-row>
        </b-container>


Script:
created() {
      this.getAllPosts();
      this.getAllUsers();
    },
    methods: {
      async getAllPosts() {
        await axios.get('http://jsonplaceholder.typicode.com/posts')
          .then(response => {
            this.posts = response.data
          })
          .catch(error => {
            console.log(error)
          })
      },
      async getAllUsers() {
        await axios.get('http://jsonplaceholder.typicode.com/users')
          .then(response => {
            this.users = response.data
            console.log(this.users)
          })
          .catch(error => {
            console.log(error)
          })
      },
    }
  • Вопрос задан
  • 62 просмотра
Пригласить эксперта
Ответы на вопрос 1
@dGololobov
начинающий
Ну в идеале. Вы могли бы и из базы данных теоретически получать посты, сразу с указанием автора например.
Ну да ладно.Тут вариантов несколько.
Вы можете при получении пользователей подправить массив this.posts:

async getAllUsers() {
        const { data: users } = await axios.get('http://jsonplaceholder.typicode.com/users')
         this.posts = this.posts.map(p => {
                p.author = users.find(u => u.id === p.userId)
                return p
          })
      },


Вариант номер два - сделать тоже самое, но уже в computed-секции и вывести результат в шаблон.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
01 дек. 2020, в 23:18
80000 руб./за проект
01 дек. 2020, в 22:41
60000 руб./за проект
01 дек. 2020, в 21:24
500 руб./за проект