Vue如何根据条件播放本地MP3文件

Question

以下是对话框JS，对话框默认隐藏，目的是根据条件弹出对话框的同时播放MP3音频

 <div style="position: absolute">
        <el-dialog class="el-card__body" title="AAAA" :visible.sync="form.t1.dialogFormVisible"
                   @closed="handleClose1">
        </el-dialog>
      </div>

以下是对话框绑定的方法，会根据条件改变form.t1.dialogFormVisible为true从而显示对话框。
目的是在if判断条件成立后触发播放音频

watch: {
    list1: function (value) {
         for (const a of value) {
              if (a.alarmLevel == 0) {
          this.form.t1.dialogFormVisible = true
}}}}

下图是音频和本页面的结构

Answer 1

判断条件已经知道 只要把 判断条件和你的音频对应即可实现

import audio form './xx.MP3'
data(){
 return {
 audio:audio
 }
}
<audio ref='audio' :src='audio '></audio>

// 通过 this.$refs.audio.paly() 播放
// 通过 this.$refs.audio.pause() 暂停