I've been encountering a persistent error that I can't seem to resolve: [Vue warn]: Duplicate keys detected: '10'. This issue is causing an update error in my application.
Despite trying the following steps, the error continues to appear in my console:
1. Fetching data from a JSON API to retrieve both user and album lists. 2. Attempting to merge these arrays into a single array. 3. Nesting a v-for loop to render a list of users with each user's corresponding album based on their ID.
Details of My App:
<template>
<div>
<!-- Loop through the usersInfos 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>
<!-- Loop through the albums 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>