[Vue warn]: Обнаружены повторяющиеся ключи: «10». Это может привести к ошибке обновления - PullRequest
Новая
       41

[Vue warn]: Обнаружены повторяющиеся ключи: «10». Это может привести к ошибке обновления

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

Я пытаюсь снова и снова, и я не понимаю эту ошибку: [Vue warn]: Обнаружены повторяющиеся ключи: '10'. Это может вызвать ошибку обновления.

Я попробовал это ниже, но ошибка произошла в моей консоли.

1 / Я получаю ресурс от JSON API, чтобы иметь список пользователей и список альбомов 2 / Затем я пытаюсь объединить эти массивы в один 3 / попытаться сделать v-for l oop вложенный для отображения списка пользователей с альбомом каждого пользователя по идентификатору.

Мое приложение: 

<template>
    <div>
        <!-- through the users/u array -->
        <div>
            <ul v-for="u in 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>
        </div>
        <div>
            <!-- through the album array / a -->
            <ul ul v-for="album in albums" :key="album.userId">
                <li>{{album.title}}</li>
            </ul>
        </div>
    </div>
</template>

<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;
        }
    }
</script>
...