HTML 音频元素被 Vue 动态绑定源禁用

Question

我正在为一个使用 Vue.js 销售嘻哈节拍的学校项目制作一个小网站，我正在制作一个页面，让你预览节拍并购买它。我正在使用 HTML 音频标签进行节拍预览。我有每个节拍的数据，包括其来源，但是当我动态绑定音频源时，音频元素被禁用。但是，开发工具显示绑定了正确的源。

当我对源代码进行硬编码时，它可以工作。当其他人在线动态绑定不变的图像或视频源时，它对他们的工作方式与我相同。我什至在音频标签中输入了"v-if='beat.source'"，并且出现了该元素，因此在页面加载时似乎知道源存在。

<div class="beat-block" v-for="beat in beats" v-bind:key="beat.id">
   <h2 class="beat-title">{{ beat.name }}</h2>
   <audio controls class="beat-preview" controlslist="nodownload">
      <source :src="beat.source" :type="beat.type">
   </audio>
   <div class="beat-tags">
      Tags:
      <div class="tags-list" v-for="tag in beat.tags">{{tag}}&nbsp; 
      </div>
   </div>
   <button class="beat-buy" @click="pushPurchase(beat.id)">Buy</button>
</div>

data: function() {
    return {
      beats: [
        {
          name: "Fruity Beat",
          source: "../assets/beats/fruity.wav",
          type: "audio/wav",
          tags: ["trap", "happy", "upbeat", "bubbly", "playful"],
          id: 1
        },
        {
          name: "Cloud Rap",
          source: "../assets/beats/julia.mp3",
          type: "audio/mp3",
          tags: ["trap", "cloud rap", "spacey", "atmospheric"],
          id: 2
        }
      ]
    };

这是块现在的样子

Answer 1

我看到你使用相对路径../assets/beats/fruity.wav，你能尝试使用require吗：

<audio controls class="beat-preview" controlslist="nodownload">
   <source :src="getSource(beat)" :type="beat.type">
</audio>

并添加一个方法：

methods: {
  getSource(beat) {
    return require(beat.source)
  }
}