Is there a way to pass object property in v-for to Vue data?

Question

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!

You don’t need the v-model, and you don’t have a filteredPosts array. — muka.gergely
– muka.gergely, Commented May 15, 2019 at 7:31
I have a method for filtering already, and I realized it's a mistake on my part not to include that code in my question above. I'll edit it in so it's clearer. — hnzhttri
– hnzhttri, Commented May 15, 2019 at 7:53

Frank · Accepted Answer · 2019-05-15 07:34:21Z

1

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>

answered May 15, 2019 at 7:34

Frank

1,4142 gold badges17 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Frank Over a year ago

I now see that there some errors in the console. That's because .find is called before posts is fully initialized. Maybe you should create a method for the filtering and check whether posts already has data.

Cédric M. Over a year ago

Careful here, in some cases, users.find(user => user.id === post.userId) may return undefined (either the list of users is not complete or post.userId references a bad user). But nonetheless, the snippet is good.

hnzhttri Over a year ago

I have a method for filtering already, and I realized it's a mistake on my part not to include that code in my question above. Though, your solution worked as I tried it out with what I have.

Jalil · Accepted Answer · 2019-05-15 07:28:53Z

0

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

answered May 15, 2019 at 7:28

Jalil

1,2761 gold badge15 silver badges36 bronze badges

Collectives™ on Stack Overflow

Is there a way to pass object property in v-for to Vue data?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related