Javascript 是否有方法将v-for中的对象属性传递给Vue数据？

我正在使用axios从中获取API数据。我一直在尝试根据每个帖子的userId获取用户名，这样我就可以在html中显示它

例如：
职位

• post.id=1

• post.userId=1

使用者

• user.id=1
• user.name=Leanne Graham

---

这是我到目前为止的HTML。我已经尝试了post.userId的v-model，但现在我不知道如何将其传递给数据

<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>

非常感谢

试试看

<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-model无法以这种方式传递数据。相反，我使用

users.find

过滤用户数组以匹配帖子ID

find（）方法返回数组中满足提供的测试函数的第一个元素的值。有关

的详细信息。查找

我在下面创建了一个示例


var vm=new Vue({
el:“#应用程序”，
数据（）{
返回{
员额：[]，
用户：[]，
}
},
创建（）{
常量baseURL=https://jsonplaceholder.typicode.com';
获取（baseURL+'/posts？\u limit=20'）
。然后（res=>{
this.posts=res.data
})
.catch（err=>console.log（err））；
get（baseURL+/users/）
.然后（res=>this.users=res.data）
.catch（err=>console.log（err））；
}
})

{{post.title}
帖子ID:{Post.userId}

用户名：{{users.find（user=>user.id==post.userId.name}

您不需要v-model，也没有filteredPosts数组。我已经有了一种过滤方法，我意识到我没有在上面的问题中包含该代码是一个错误。我将在中编辑它，以便更清晰。我现在看到控制台中有一些错误。这是因为
.find
是在
posts
完全初始化之前调用的。也许您应该创建一个筛选方法，并检查
posts
是否已经有数据。请注意，在某些情况下，
users.find（user=>user.id==post.userId）
可能返回
未定义的
（用户列表不完整或post.userId引用了一个坏用户）。尽管如此，这个代码片段还是不错的，我已经有了一个过滤的方法，我意识到在我上面的问题中没有包含那个代码是我的错误。尽管如此，你的解决方案还是奏效了，因为我已经尝试过了。
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())
      })
    }
  }
})

<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