Почему мой аудио-тег загружает источник, когда он жестко запрограммирован, но не когда предоставлен Vue.js?

Question

Я создал компонент, и в этом компоненте есть аудио-тег.Я пытался передать путь файла mp3 к компоненту от его родителя, но аудиоэлемент, по-видимому, не может успешно загрузить файл по какой-то причине.Элемент просто становится серым, и я не получаю никакой ошибки.Я знаю, что свойства успешно передаются, потому что я также передаю название трека, и это прекрасно загружает компонент.Однако, если я жестко закодировал тот же путь для источника, то он работает нормально.Что не имеет большого значения, но у меня есть 11 треков, и с заявлением v-for было бы намного проще.

Вот мой родительский компонент:

    <template>
    <div container>
        <div class=banner>
            <img src="../assets/CryptoLogo2.svg"/>
        </div>
        <div class="albumcontainer">
          <div class="covercontainer"><img src="../assets/TIADCover(Final).png"/></div>
          <div class="arrow"></div>
          <div class="tracklistcontainer">
            <table class="tracklist">
              <tr class="track" v-for="track in tracks" :key="track.file"  style="padding: 20px;">
                <td>
                  <player :name="track.name" :file="track.file" />
                </td>
              </tr>
            </table>
          </div>
        </div>
        <div class="bio">
          <p>
          </p>
        </div>
        <div class="footer">
          <div class="footericons">
            <img src="../assets/icons/Facebook.svg" />
            <img src="../assets/icons/Instagram.svg" />
            <img src="../assets/icons/Twitter.svg" />
          </div>
        </div>
  </div>
</template>

<script>
import player from './player'
    export default {
  name: "Album1",
  data() {
    return {
      tracks: [
        {
          name: '5G',
          file: '../assets/tracks/5G.mp3'
        }
      ]
    }
  },
  components:{
    player
  }
};
</script>

А затем компонент с аудиотэгом:

<template>
    <div>
        <h3>{{ name }}</h3>
        <audio controls controlsList="nodownload">
            <source ref="player" v-bind:src="file" type="audio/mpeg">
        </audio>
    </div>
</template>

<script>
export default{
    name: "player",
    props: {
        name: {
            type: String,
            default: null
        },
        file:{
            type: String,
            default: null
        }
    }
}
</script>

Здесь вы можете видеть, что мои данные успешно передаются.

И вы видите, что атрибут источника также загружается правильно.

Это то, что я получаю, и вы можете видеть, что h3 прекрасно загружается, поэтому я знаю, что данные передаются.Но элемент неактивен.

Чтобы проверить это, я попытался просто жестко кодировать путь к файлу:

<source src="../assets/tracks/5G.mp3">

И это прекрасно работает:

Но я не хочу так делать, потому что у меня есть около 11 треков, поэтому яхотел бы, чтобы он загружался из передаваемых данных, чтобы я мог повторно использовать компонент.Есть идеи?

Answer 1

попробуйте использовать что-то подобное в вашем Vue v-for Я использую это, когда src не загружается в тег img.

:src="getSrc(x.src)"

---

  methods: {
   getSrc(src) {
     return require("../assets/" + src);
   }
 }

Answer 2

Ваша функция наблюдения на подпорке файла никогда не запускается, потому что имя вашего файла статично, оно никогда не вызывает изменения на наблюдателе перед монтированием компонента, по крайней мере, в том коде, который вы указали именно таким образом.

Из API Vue.js vm. $ Watch Наблюдать изменения в выражении или вычисляемой функции в экземпляре Vue.Обратный вызов вызывается с новым значением и старым значением.