在加载以下单一文件Vue.js组件时，我试图挂接到一些HTML5音频事件：
any当带有<template>
<audio ref="player" v-bind:src="activeStationUrl" v-if="activeStationUrl" controls autoplay></audio>
</template>
<script>
export default {
props: ['activeStationUrl'],
data () {
return {
// Last media event that was recorded. We don't hook in to all events. More info at
// https://developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Cross-browser_audio_basics.
'lastEvent': null,
}
},
mounted () {
const eventsToHookInTo = ['loadstart', 'canplay']
for (var eventToHookInTo in eventsToHookInTo) {
this.$refs.player.addEventListener(eventToHookInTo, function () {
this.lastEvent = eventToHookInTo
})
}
},
}
</script>
的行触发时，引用this.$refs似乎尚未注册，因此会导致错误。在组件加载时附加这些事件侦听器的正确方法是什么？
答案 0 :(得分：0)
您应该能够在mounted钩中对其进行访问。我猜问题出在这里的v-if中。您是否可以将其更改为v-show？
如果不能这样做，则可以尝试使用$nextTick方法。这应该也可以正常工作，因为元素的实际渲染要等到下一个刻度线才会发生。