[Vue 警告]：检测到重复键：'10'。这可能会导致更新错误答案

【问题标题】：[Vue warn]: Duplicate keys detected: '10'. This may cause an update error[Vue 警告]：检测到重复键：'10'。这可能会导致更新错误
【发布时间】：2020-06-10 07:15:55
【问题描述】：

我一次又一次地尝试，但我不明白这个错误：[Vue 警告]：检测到重复键：'10'。这可能会导致更新错误。

我已在下面尝试过此操作，但错误发生在我的控制台中。

1/ 我从 JSON API 获取资源以获取用户列表和专辑列表 2 /然后我尝试将这些数组合并为一个 3/ 尝试创建一个嵌套的 v-for 循环，以呈现一个用户列表，其中包含每个 id 的每个用户的专辑。

我的应用：

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

【问题讨论】：

您很可能有多个具有相同userId 的专辑，因此album.userId 和key 将导致该错误。
感谢您评论我的问题！是的，确实，但我尝试了很多东西：album.id，或者在 usersInfos 中放置一个 v-for 父级和两个 v-for 子级，但这次它在控制台中没有错误就无法正常工作
尝试在附加的 li 元素中同时在 v-for 中输出一个键并查找重复项
您可以将整个 .vue 文件作为代码插入，无需拆分。您也不会丢失代码 sn-ps。

标签： javascript json vue.js axios v-for

【解决方案1】：

问题可能是重复的，如果您尝试删除重复项，我认为这可能会奏效。

使用以下代码删除重复项：

this.usersInfos = this.usersInfos.filter((value, index, self) => self.findIndex(m => m.id === value.id) === index)

【讨论】：