Question

我是Vue.js的新开发人员，我尝试进行此练习，但被卡住了！因此，如果有人可以帮助我！可能很好！谢谢:)解决方案对于大多数人来说可能是显而易见的，但是我是这个分支的新手！我也在寻找最佳实践，因此，如果您有一些建议，我将不胜感激！

---> 我有一个API的三个URL（每个URL是一个数组），我想根据用户ID显示此JSON API的用户列表。

第一个电话是列表：https://jsonplaceholder.typicode.com/users 第二张是其中一张专辑：https://jsonplaceholder.typicode.com/users/1/albums
第三个是：https://jsonplaceholder.typicode.com/users?username=XXXXXXXX

我设法通过v-for显示了我想要的内容（名称，用户名，电子邮件，电话和网站）的列表，并且设法显示了相册数组（标题），但是相册列表未由ID呈现。因此，每个用户列表中都有10个标题。那不是我想要的！我希望专辑标题根据其ID出现在用户列表中，而不在每个列表中显示所有标题。

我尝试进行三个API调用，将每个API的数据合并到一个数组中，但是我无法显示嵌套的v-for。我在控制台中没有收到错误消息，但未显示任何内容。这是我的代码：

<div class="main">
<div class="content">
   <h3>User List</h3>
   <input type="text" v-model="search" placeholder="name or email"> 
  <div class="userInfos">
   <!-- through the merge/usersInfos array -->
 <div v-for="user in usersInfos" :key="user.id">
   <!-- through the users/u array -->
      <ul v-for="u in user.usersInfos" :key="u.id"> 
        <li class="puce">{{u.name}}</li>
        <li>{{u.username}}</li>
        <li>{{u.email}}</li>
        <li>{{u.phone}}</li>
        <li>{{u.website}}</li>
     </ul>
    <!-- through the album array / a -->
      <ul ul v-for="album in user.albums" :key="album.id">
        <li>{{album.title}}</li>
      </ul>
       <!-- through the photo array / p -->
      <ul v-for="p in user.photos" :key="p.id">
        <li>{{p.thumbnailUrl}}</li>
        <li>{{p.title}}</li>
      </ul>
    </div>
  </div>
</div>

<script>
import axios from 'axios'
export default {
  name: 'Page',
  data(){
    return {
      usersInfos: [],
      usersList: [],
      albums: [],
      search: '',
    }
  }, 



  mounted(){
    // request users List
    let merge = [];
    let usersList = [];
    let albums = [];


  axios.get('https://jsonplaceholder.typicode.com/users')
  .then(response => {
    this.usersList = response.data
    usersList = this.usersList;
    console.log(usersList, 'usersList')
    merge.push(usersList);
    console.log(merge, 'FIRST_MERGE')
  })
  .catch((error) => {
    console.log(error);  
    });

  axios.get(' https://jsonplaceholder.typicode.com/users/1/albums')
  .then(responseAlbum => { 
    this.albums = responseAlbum.data
    albums = this.albums;
    console.log(albums, 'Albums');
    merge.push(albums);
    console.log(merge, 'SECOND_MERGE')
  })
  .catch((error) => {
    console.log(error);  
  });
    merge = this.usersInfos;

如何从API数据显示嵌套数组的嵌套v-for？

0 个答案: