Hi i am trying to get the audio element from the dom and play it The audio file will have the same "id" as the button.

So far i was able to get the button id but when i try to select the element by id i get an error.

Code:

<script>
export default {
  data() {
    return {};
  },
  methods: {
    play_audio(e) {
      //get button clicked
      const button = event.target.id;
      console.log(button);

      document.getElementById(button).play();
    },
  },
  mounted() {},
};
</script>

<template>
  <main>
    <div class="results">
      <div class="result" v-for="(item, index) in cover_xl">
        <div class="result_img">
          <img :src="cover_xl[index]" :alt="title[index]" />
          <button @click="play_audio" :id="preview[index]">Play</button>
        </div>
        <h2>{{ title[index] }}</h2>
        <audio :id="preview[index]">
          <source :src="preview[index]" />
        </audio>
      </div>
    </div>
  </main>
</template>

Thanks in advance