为什么使用vue时audio的事件监听都失效了呢

<template>
<audio id="audioPlay" :src="isPlay" @oncanplay="playing()" @onended="ended()" v-el:audio>
</audio>
</template>

<script>

export default {
    computed: {
        isPlay() {
            return this.$store.state.audioSrc;
        }
    },
    methods: {
        playing() {
            console.log('audio paly');
       },
        ended() {
            console.log('audio end');
        }
    },
}
</script>

代码如上
事件监听不生效,这是为什么呢?

1 Like

你似乎把事件名写错了。@oncanplay要写成@canplay,@onended要写成@ended

1 Like

非常感谢你的帮助,的确是这样,去掉on之后就好了,谢谢你 :blush:

我去掉了,但是不行啊,没执行
<audio
:id=“message.mid”
:src=“message.msg”
style=“display:none”
@ended=“audioEnd()”
@canplay=“getDuration(message.mid)”
/>
getDuration(mid) {
console.log(‘111’); // 此时可以获取到duration
console.log(document.getElementById(mid).duration); // 此时可以获取到duration
},

sudioPlay.addEventListener(‘playing’, () => {})