前言

略去。。。

代码

<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中实现微信语音播放暂停功能
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue