Vue JS中的两个独立数组和V-For循环和V-IF

Question

我正在做一个使用Vue JS的项目。这个问题可能与其他类似的问题重复，但老实说，类似问题的答案并没有帮助我解决这个问题!
有两个数组(独立的数组)。一个歌手数组，用于存储每个歌手的信息，如singer id
一个存储音乐信息的数组，如音乐id、音乐名称、歌手id
现在我要循环遍历两个数组并比较两个数组中的歌手id，以使用v-for从音乐数组中获取相关的音乐。我使用了所有建议的v-for循环数组和嵌套数组，但它没有正常工作，我没有收到任何东西或错误，如:无法读取属性'singer_id'的未定义.
我尝试使用常规嵌套的v-for和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>

在这种情况下，我在顶部收到提到的错误。我也删除[I]，只是调用singer_id，但它没有工作太。
如果有人告诉我如何循环遍历这些数组和使用v-for比较歌手id，我真的很感激。

Answer 1

我修改了您的代码，如下所示。这是我的答案，这是你收到的所有答案的混合到这一点!
我添加了一个新的计算属性" relatedsinger "它使用"Filter"在两个数组中根据歌手id获取艺术家数据。然后在HTML标签中，不是循环遍历Artists数组，而是首先对getmusiccomputed属性使用v-for循环。然后，在子标记循环通过RelatedSingers计算属性。
我附上了修改后的代码。

let app = new Vue({
el: "#app",
data(){
return{
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:[
{
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'))
}
]
}
},
computed:{
GetArtists:function(){
return this.artists;
},
GetMusics:function(){
return this.musics;
},
RelatedSingers:function(){
return id => this.artists.filter(singer => singer.singer_id === id);
}
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.js"></script>
<div id="app" class="fav_item_rows">
<div class="fav_item_box">
<ul v-for="(song,i) in GetMusics" :key="i">
<li class="fav_item" v-for="(artist,j) in RelatedSingers(song['singer_id'])" :key="j">
{{artist['artist_name']}} {{song['song_name']}}
</li>
</ul>
</div>
</div>