Javascript Vue JS中的两个独立阵列和V-For-Loop和V-IF

我正在使用Vue JS进行一个项目。这个问题可能与其他类似问题重复，但老实说，类似问题的答案并没有帮助我解决这个问题
有两个阵列（单独的阵列）。一个歌手数组，用于存储每个歌手的信息，如歌手id、歌手姓名等。
一个音乐数组，用于存储有关音乐的信息，如音乐id、音乐名称、歌手id等。
现在我想循环两个数组，比较两个数组中的singer id，使用v-for从musics数组中获取相关音乐。 我对数组和嵌套数组使用了所有建议的v-for循环，但它没有正常工作，我没有收到任何错误，例如：无法读取未定义的属性“singer\u 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'
      },
]

{{歌曲[i]}

在这种情况下，我收到了上面提到的错误。我也删除了[I]并只是打电话给singer_id，但也没用。

---

如果有人帮助您循环这些数组并使用v-for-compare-singer-id，我真的很感激。

您的代码不起作用的主要原因是您使用了非常混乱的命名约定。也就是说，GetMusics中的

（歌曲，i）应该是GetMusics中的
（歌曲，i）

通过使用复数来命名实际是单个元素的内容，您感到困惑，在模板中您认为它是一个数组：
songs[i]['song\u title']
。但这只是一个项目，所以
歌曲['song\u title']
会起作用，就像
歌曲一样。song\u title
也会起作用。
艺术家也是如此

下面是通过您提供的数据进行循环的一般示例。它旨在为您提供一个如何编写可读代码和逻辑的示例。我希望您发现它很容易理解，并且在重写自己的代码时很有用


Vue.config.devtools=false；
Vue.config.productionTip=false；
新Vue({
el:“#应用程序”，
数据：（）=>({
艺术家：[{
歌手编号：1，
类别:"艺术家",，
艺术家名称：“Ariana Grande”，
追随者：“57932090”
},
{
歌手_id:"2",，
类别:"艺术家",，
艺术家名称：“泰勒·斯威夫特”，
追随者：“41100000”
},
{
歌手_id:"3",，
类别:"艺术家",，
艺术家名称：“Eminem”，
追随者：“36900000”
}
],
音乐：[{
song_id:'1'，
歌手_id:"2",，
song_名称：“空白”，
持续时间：“00:20”，
},
{
song_id:'2'，
歌手_id:"2",，
宋_名字：“精致”，
持续时间：“00:20”，
},
{
song_id:'3'，
歌手_id:"3",，
宋ú的名字：“不怕”，
持续时间：“00:20”，
}
]
}),
方法：{
getArtistSongs（艺术家）{
返回这个.music.filter（m=>m.singer\u id===artist.singer\u id）；
}
}
})




没有歌曲。。。¯\_(ツ)_/¯
我修改了您的代码，如下所示。这是我的答案，它是迄今为止您收到的所有答案的混合！
我添加了一个名为“RelatedSingers”的新计算属性，它使用“Filter”根据两个数组中的歌手id获取艺术家数据。然后，在HTML标记中，而不是在艺术家数组中循环，首先为GetMusics computed属性使用v-for循环。然后，在子标记中通过RelatedSingers computed属性循环。

我附上了我修改过的代码


let app=new Vue({
el:“应用程序”，
数据（）{
返回{
艺术家：[
{
歌手编号：1，
类别:"艺术家",，
艺术家名称：“Ariana Grande”，
//图片：编码器组件（需要（'@/assets/Items/Singers/Ariana Granade/Covers/HomeCover.jpeg'），
追随者：“57932090”
},
{
歌手_id:"2",，
类别:"艺术家",，
艺术家名称：“泰勒·斯威夫特”，
//图片：编码器组件（需要（'@/assets/Items/Singers/Taylor Swift/HomeCover.jpg'），
追随者：“41100000”
},
{
歌手_id:"3",，
类别:"艺术家",，
艺术家名称：“Eminem”，
//pic:encodeURIComponent（需要（'@/assets/Items/Singers/Eminem/HomeCover.jpg'），
追随者：“36900000”
},
],
音乐：[
{
song_id:'1'，
歌手_id:"2",，
song_名称：“空白”，
持续时间：“00:20”
//封面：encodeURIComponent（需要（'@/assets/Items/Singers/Taylor Swift/Blank Space.jpg'），
//song:encodeURIComponent（需要（'@/assets/Items/Singers/Taylor Swift/Taylor Swift-Blank Space.mp3'））
},
{
song_id:'2'，
歌手_id:"2",，
宋_名字：“精致”，
持续时间：“00:20”
//封面：编码器组件（需要（'@/assets/Items/Singers/Taylor Swift/tiller.jpg'），
//song:encodeURIComponent（需要（'@/assets/Items/Singers/Taylor Swift/Taylor Swift-definate.mp3'））
},
{
song_id:'3'，
歌手_id:"3",，
宋ú的名字：“不怕”，
持续时间：“00:20”
//封面：encodeURIComponent（require（“@/assets/Items/Singers/Eminem/not fear.jpg”），
//歌曲：encodeURIComponent（require（'@/assets/Items/Singers/Eminem/Eminem-notfear（trister.mp3'））
}
]
}
},
计算：{
GetArtists:function（）{
把这个还给我；
},
GetMusics:function（）{
归还这个。音乐；
},
相关歌手：函数（）{
返回id=>this.artists.filter（singer=>singer.singer\u id==id）；
}
}
})；

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