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

是否可以将v-for中的对象属性传递给Vue数据？

2 个答案: