Как отобразить вложенный v-for вложенного массива из данных API? - PullRequest
Новая
       45

Как отобразить вложенный v-for вложенного массива из данных API?

0 голосов
/ 25 февраля 2020

Я новый Vue. js разработчик, и я пытаюсь выполнить это упражнение, но я застрял! Так что, если кто-то может мне помочь! Это может быть очень приятно! Спасибо :) решение, вероятно, очевидно для большинства из вас, но я новичок в этой отрасли! Я тоже ищу лучшие практики, поэтому если у вас есть несколько советов, я был бы признателен!

---> У меня есть три URL-адреса от API (каждый из которых является массивом), и я хотел бы отобразить список пользователей этого JSON API на основе идентификатора пользователя.

первый вызов - список: https://jsonplaceholder.typicode.com/users второй - один из альбомов: https://jsonplaceholder.typicode.com/users/1/albums
и третий: https://jsonplaceholder.typicode.com/users?username=XXXXXXXX

Мне удалось отобразить список того, что я хочу, с помощью v-for (имя, имя пользователя, адрес электронной почты, телефон и веб-сайт), и мне удалось отобразить массив альбомов (название ), но список альбомов не отображается по идентификатору. Таким образом, у меня есть 10 названий в каждом списке пользователей. И это не то, что я хочу! Я хочу, чтобы названия альбомов появлялись в списке пользователей в соответствии с их идентификатором, а не отображали все названия в каждом списке.

Я попытался сделать три вызова 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;
...