在Vue项目中使用vue-aplayer插件时，做分页的效果，点击下一页音频数据不会更新，但是他会默认从头开始

Question

这是组件

<div class="demoThree" style="width: 100%">
<aplayer  autoplay
        :music="{
                title: ' ',
                artist: ' ',
                src: voice,
                pic: ' ',
                }"
                />
</div>

在下面得到数据的函数赋值的时候

 if (data.data.data.records[0].audioPath!=null&&data.data.data.records[0].audioPath!=''){
        this.voice=data.data.data.records[0].audioPath;
}

后台返回数据中没有这条数据就不会赋值，但是音频也从0开始

Answer 1

可能是因为在点击下一页时，Vue-Aplayer插件并没有及时更新音频数据导致的。你需要在点击下一页时，通过代码手动更新音频数据并重新播放。

你可以将更新音频数据的代码写在watch或者computed中，当你的音频数据变化时，这些方法会自动触发。在代码中，你需要先暂停当前的音频，然后更新音频数据，最后重新播放音频。

例如，假设你的音频数据存储在audioList中，你可以在watch中监听currentPage的变化，并在变化时更新音频数据，代码如下：

watch: {
  currentPage: function(newPage) {
    // 计算新的音频列表
    const startIndex = (newPage - 1) * this.pageSize;
    const endIndex = Math.min(startIndex + this.pageSize, this.totalCount);
    const newAudioList = this.allAudioList.slice(startIndex, endIndex);

    // 暂停当前的音频
    this.$refs.ap.pause();

    // 更新音频列表
    this.audioList = newAudioList;

    // 重新播放音频
    this.$nextTick(() => {
      this.$refs.ap.play();
    });
  }
}

上面的代码中，我们首先计算新的音频列表，然后暂停当前的音频，更新音频数据，最后重新播放音频。请注意，我们在更新音频数据之后，通过$nextTick方法延迟播放音频，以确保Vue-Aplayer插件已经渲染了新的音频数据。

当然，这只是一个简单的示例，你需要根据你的具体情况来编写代码。希望这能帮到你