How to display the results of two queries in one list?

Question

Vue.js

There are two jsons - https://jsonplaceholder.typicode.com/posts and https://jsonplaceholder.typicode.com/users
Layout -
It turns out that we take the names from the second request, and the title and content from the first. And we display everything in one list element. How to get it all out? I glued two arrays obtained using the concat method, but it simply adds new elements to the end of the list. There will also be 3 requests - comments, but I would like to deal with two for now.

Answer 1

Make a computed property - an array, the elements of which will contain references to the data of the original arrays:

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>