In my VueJs application, I am using a component called Aplayer (or any similar components) to play audio and manage playlists.
However, I am facing an issue where I need to reload the component when I change the playlist without changing the routes. Is there a way to either reload or destroy the component and then immediately load it again?
I am trying to update the playlist of this component while music is playing, but sometimes it plays songs from the previous playlist for some unknown reason.
HTML snippet:
<aplayer autoplay
ref="remote"
:music="music_list[0]"
:list="music_list"
:float="float"
:mutex="mutex"
repeat="list"
:mini="mini"
preload="auto"
@ended="onEnd"
@loadstart="playCMD"
@playing="onStart"
:listFolded="listFolded"
:controls="controls"
:muted.sync="muted"
:volume.sync="volume"
slot="display"
/>
JavaScript snippet:
export default {
components: {
Aplayer
},
data: () => ({
float: false,
autoplay: true,
mutex: true,
muted: false,
volume: 0.8,
mini: false,
listFolded: false,
controls: true,
music_list: [..]
}),
methods: {
onEnd: function () {
// Perform tasks that trigger an event which updates the music list
this.music_list = [new music list after event trigger]
}
}
}