有没有办法将 v-for 中的对象属性传递给 Vue 数据？

Question

我正在使用 axios 从 https://jsonplaceholder.typicode.com 获取 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>

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

这是我的 .js 文件。如您所见，我注释掉了我获取用户详细信息的尝试。我试过做“res.data.name”，但在控制台中尝试后，我得到“未定义”。

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())
      })
    }
  }
})

非常感谢！

Answer 1

我认为这就是您的意思/尝试实现的目标。您不能使用 V-model 以这种方式真正传递数据。相反，我使用users.find 过滤用户数组以匹配帖子ID。

find() 方法返回数组中满足提供的测试函数的第一个元素的值。更多信息请参见 .find here 。

我在下面创建了一个示例。

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>

Answer 2

试试

<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