vue中audio动态绑定src不能播放

前言

略去。。。

代码

<audio id="audio" controls>
  <source :src="audUrl || '../assets/alarm.ogg'" type="audio/ogg" />
</audio>

问题

发现问题

绑定的时候,发现并不管用

let audio = document.querySelector('#audio')
axios.get()
  .then(res => {
    this.audUrl = res.data.xxx
  })

解决问题思路

～打印res.data.xxx是有值的。那为啥不生效呢？【 排除接口问题 】
～审查html audio元素，src属性是不是我们想要的返回值 【 排除页面属性挂载问题 】
～重新写一个audio标签写在页面上，引入接口返回的url地址 【 排除接口返回资源是否正确及audio标签是否正常 】
。。。。。

解决

代码改为

<audio ref='audio' controls>
  <source :src="audUrl || '../assets/alarm.ogg'" type="audio/ogg" />
</audio>

绑定的时候

this.$refs.audio.src = res.data.xxx

下一节，Vue中实现微信语音播放暂停功能