在v-for中切换自定义音频播放/暂停按钮

data() {
  return {
    audios: [
      { id: 1, src: 'audio1.mp3', playing: false },
      { id: 2, src: 'audio2.mp3', playing: false },
      { id: 3, src: 'audio3.mp3', playing: false }
    ]
  }
}

<div v-for="audio in audios" :key="audio.id">
  <audio :src="audio.src" :id="'audio-' + audio.id"></audio>
  <button @click="toggleAudio(audio.id)">
    {{ audio.playing ? '暂停' : '播放' }}
  </button>
</div>

methods: {
  toggleAudio(id) {
    const audioElement = document.getElementById('audio-' + id);
    const audio = this.audios.find(a => a.id === id);
    
    if (audio.playing) {
      audioElement.pause();
    } else {
      audioElement.play();
    }
    
    audio.playing = !audio.playing;
  }
}