Как вывести результаты двух запросов в одном списке?

Question

anton_trofimov95 @anton_trofimov95

Vue.js

Как вывести результаты двух запросов в одном списке?

Есть два json - https://jsonplaceholder.typicode.com/posts и https://jsonplaceholder.typicode.com/users
Макет -

Получается, что имена берем со второго запроса, а заголовок и содержание с первого. И выводим все в одном элементе списка. Как так это все вывести? Склеивал методом concat два массива полученных, но оно просто добавляется в конец списка новые элементы. Там еще и 3 запрос будет - комментарии, но мне бы пока с двумя справиться.

Вопрос задан более трёх лет назад
337 просмотров

Комментировать

Подписаться 1 Средний Комментировать

Answer 1 · 2020-02-11 18:47:48

Сделать вычисляемое свойство - массив, элементы которого будут содержать ссылки на данные исходных массивов:

computed: {
  fullData() {
    return this.posts.map(post => ({
      post,
      user: this.users.find(user => user.id === post.userId) ?? {},
    }));
  },
},

<div v-for="n in fullData">
  <div>{{ n.post.title }}</div>
  <div>{{ n.user.name }}</div>
  <div>{{ n.post.body }}</div>
</div>

Как вывести результаты двух запросов в одном списке?

Войдите на сайт