Q: Is there a way to pass object property in v-for to Vue data? I'm using axios to fetch API data from https://jsonplaceholder.typicode.com. I have been trying to get the name of the user based on the userId of each post so that I can display it in html.
ex:
POSTS


*

*post.id = 1

*post.userId = 1
USERS


*

*user.id = 1

*user.name = Leanne Graham



Here is my HTML so far. I've tried v-model for post.userId, but for now I don't know how to pass this to data.
<div id="app">
  <input class="search" placeholder="Search post" v-model="search">
  <div class="post-card" v-for="post in filteredPosts" v-model="post.userId">
    <h1>{{post.title}}</h1>
    <p>{{post.userId}}</p>
  </div>
</div>


<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js'></script>

Here is my .js file. As you can see I commented out my attempt to fetch user details. I've tried doing "res.data.name" but upon trying it out in the console, I got "undefined."
var vm = new Vue({
  el: '#app',
  data() {
    return {
      posts: [],
      users: [],
      search: '',
    }
  },
  created(){
    const baseURL = 'https://jsonplaceholder.typicode.com';

  axios.get(baseURL + '/posts?_limit=20')
    .then(res => this.posts = res.data)
    .catch(err => console.log(err));

    // axios.get(baseURL + '/users' )
    // .then(res => this.users = res.data.name)
    // .catch(err => console.log(err));
  },
  computed: {
    filteredPosts() {
      return this.posts.filter(post => {
        return post.title.toLowerCase().includes(this.search.toLowerCase())
      })
    }
  }
})

Thanks a lot!

A: I think that this is what you mean / try to achieve. You can't really pass data that way using V-model. Instead, I filter the user array to match the post ID using users.find. 
The find() method returns the value of the first element in the array that satisfies the provided testing function. More info on .find here .
I've created an example below.


var vm = new Vue({
  el: '#app',
  data() {
    return {
      posts: [],
      users: [],
    }
  },
  created() {
    const baseURL = 'https://jsonplaceholder.typicode.com';

    axios.get(baseURL + '/posts?_limit=20')
      .then(res => {

        this.posts = res.data
      })
      .catch(err => console.log(err));

    axios.get(baseURL + '/users/')
      .then(res => this.users = res.data)
      .catch(err => console.log(err));
  }
})
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">

  <div class="post-card" v-for="post in posts">
    <h1>{{post.title}}</h1>
    <p>Post ID: {{post.userId}}</p>
    <p>Username: {{users.find(user => user.id === post.userId).name}}</p>
  </div>
</div>



A: Try with 
<div id="app">
  <div class="post-card" :key="post.title" v-for="post in posts">
    <h1>{{post.title}}</h1>
    <p>{{post.userId}}</p>
  </div>
</div>

v-for="post in posts" //posts == this.posts

