I am working on a project using Vue JS. This question might be duplicated from other similar questions but honestly, answer of similar questions did not help me to solve this issue!
There are two arrays (separate arrays). One array for singers which store information about each singer such as singer id, singer name and etc.
One array for musics which stores information about music such as music id, music name, singer id and etc.
Now I want to loop through both arrays and compare singer id in both arrays to get related music from musics array using v-for. I used all suggested v-for loop for arrays and nested arrays but it didn't work properly and I receive nothing or an error like: Cannot read property 'singer_id' of undefined.
I tried to solve this issue using regular nested v-for and a v-if:
//Singers Array
artists:[
{
singer_id: '1',
category: 'artist',
artist_name: 'Ariana Grande',
pic: encodeURIComponent(require('@/assets/Items/Singers/Ariana Granade/Covers/HomeCover.jpeg')),
followers: '57932090'
},
{
singer_id: '2',
category: 'artist',
artist_name: 'Taylor Swift',
pic: encodeURIComponent(require('@/assets/Items/Singers/Taylor Swift/HomeCover.jpg')),
followers: '41100000'
},
{
singer_id: '3',
category: 'artist',
artist_name: 'Eminem',
pic: encodeURIComponent(require('@/assets/Items/Singers/Eminem/HomeCover.jpg')),
followers: '36900000'
},
]
//Musics Array
musics:[
{
song_id: '1',
singer_id: '2',
song_name: 'Blank Space',
duration: '00:20',
cover: encodeURIComponent(require('@/assets/Items/Singers/Taylor Swift/Blank Space.jpg')),
song: encodeURIComponent(require('@/assets/Items/Singers/Taylor Swift/Taylor Swift - Blank Space.mp3'))
},
{
song_id: '2',
singer_id: '2',
song_name: 'Delicate',
duration: '00:20',
cover: encodeURIComponent(require('@/assets/Items/Singers/Taylor Swift/Delicate.jpg')),
song: encodeURIComponent(require('@/assets/Items/Singers/Taylor Swift/Taylor Swift - Delicate.mp3'))
},
{
song_id: '3',
singer_id: '3',
song_name: 'Not Afraid',
duration: '00:20',
cover: encodeURIComponent(require('@/assets/Items/Singers/Eminem/not afraid.jpg')),
song: encodeURIComponent(require('@/assets/Items/Singers/Eminem/Eminem - Not Afraid (Teaser).mp3'))
}
]
//Computing Arrays
export default{
computed:{
GetArtists:function(){
return this.$store.state.artists;
},
GetMusics:function(){
return this.$store.state.musics;
}
}
}
<div class="fav_item_rows">
<div class="fav_item_box" v-for="(songs,i) in GetMusics" :key="i">
<router-link to="/" v-for="(artists,j) in GetArtists" :key="j">
<div class="fav_item" v-if="songs[i]['singer_id'] == artists[j]['singer_id']">
{{songs[i]}}
</div>
</router-link>
</div>
</div>
In this case I receive mentioned error at the top. I also remove [i] and just calling singer_id but it didn't work too.
If someone helps with how to loop through these arrays and using v-for compare singer ids I really appreciate it.
I have done some changes ..check the below code
<div class="fav_item_rows">
<div class="fav_item_box" v-for="(artist,i) in GetArtists" :key="i">
<router-link to="/" v-for="(song,j) in GetMusics(artist.singer_id)" :key="j">
<div class="fav_item">
{{song}}
</div>
</router-link>
</div>
</div>
And then replace your computed property GetMusic like below
computed:{
GetArtists:function(){
return this.$store.state.artists;
},
GetMusics:function(){
return id => this.$store.state.musics.filter(song => song.singer_id === id);
}
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments