SevenOutman / vue-aplayer

:cake: Easy-to-use music player for Vue 2.x
https://vue-aplayer.js.org
MIT License
1.33k stars 200 forks source link

请问播放歌词时一直报key重复的错误是怎么回事? #205

Open PanZ12580 opened 4 years ago

PanZ12580 commented 4 years ago

这是我的一些代码

<aplayer
        v-if="isShow"
        :audio="audio"
        :lrcType="3"
        fixed
        mini
        ref="aplayer"
      />

data() {
    return {
      audio: [null],
      isShow: false,
      musicList: [null]
    };
  },

 async mounted() {
    await this.initSong();
},

  methods: {
    async initSong() {
      findPlayList()
        .then(res => {
          this.musicList = res.data.playlist.trackIds.map(
            item =>
              `https://music.163.com/song/media/outer/url?id=${item.id}.mp3`
          );
          return res.data.playlist.trackIds;
        })
        .then(res => {
          let ids = res.map(item => item.id);
          ids = ids.join(",");
          findSongDetail(ids).then(res => {
            this.audio = res.data.songs.map(item => {
              let songId = item.id;
              let name = item.name;
              let artist = item.ar[0].name;
              let cover = item.al.picUrl;
              return {
                name,
                artist,
                cover,
                lrc: "https://autumnfish.cn/lyric?id=" + songId
              };
            });
          });
          this.isShow = true;
        });
    }
  }

一些歌曲播放没有问题,但一些歌曲播放了就会一直报类似下面这样的错误,能连续报几千条。。。

Vue warn]: Duplicate keys detected: '249020'. This may cause an update error.

found in

---> <Lyric>
       <APlayer>
         <App> at src/App.vue
           <Root>