Vue 动态设置audio/video的src 播放错乱问题

 <el-dialog :visible.sync="AudioOpen"
               :close-on-click-modal="false"
               :destroy-on-close="true"
               @close="playerAudioVisible=false"
               width="330px"
               class="dialogAV"
    >

      <audio
        v-if="AudioOpen"
        controls
        class="audio"
        ref="dialogAudio"
        preload="meta"
        width="100%">
        <source :src= audioUrl >
        您的浏览器不支持audio标签。
      </audio>
    </el-dialog>

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

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

playAudio(url){
      this.audioUrl = process.env.VUE_APP_BASE_API +url;
      this.$nextTick(res => {
        const { dialogAudio } = this.$refs
        dialogAudio.load()
        dialogAudio.play()
      })
      this.AudioOpen=true
    },

或者在标签上加上 v-if 重新加载标签

 <audio
        v-if="AudioOpen"
        controls
        class="audio"
        ref="dialogAudio"
        preload="meta"
        width="100%">
        <source :src= audioUrl >
        您的浏览器不支持audio标签。
      </audio>