Vue2动态设置audio/video的src不能播放的问题

	<audio
      ref="myAudio"
      :src="playSrc"
	>
      您的浏览器不支持音频播放
    </audio>

这里设置默认音频

data () {
  return {
    playSrc: 'xxx.mp3',
  }
},

动态更换src的后 要调用播放器自身的load方法重新加载一下（myAudio是播放器的ref引用）

this.playSrc = this.audioList[index]
this.$refs.myAudio.load() // $refs 需要在 mounted 生命周期后才能拿到哦

这样还是不够的 他还会报 Uncaught (in promise) DOMException

这是因为VUE对DOM更新是异步的 当我们改变playSrc属性数据后，DOM上绑定的src属性没有立即更新，所以操作DOM可能会报错

为了保证能在更新完成后去操作可以使用 $nextTick
他保证在更新队列完成后去执行回调方法。

 this.playSrc = this.audioList[index]
 this.$nextTick(res => {
   const { myAudio } = this.$refs
   myAudio.load()
   myAudio.play()
 })

这样就没问题了！