在我的组件生命周期中，我什么时候可以开始访问它.$refs?

Question

我在加载以下单文件 Vue.js 组件时尝试挂接到一些 HTML5 音频事件：

<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的行触发时，引用player似乎尚未注册，因此这会导致错误。加载组件时附加这些事件侦听器的正确方法是什么？

Answer 1

您应该能够在mounted钩子中访问它。我猜问题出在这里v-if。您是否可以将其更改为v-show？

如果不能这样做，可以尝试使用$nextTick方法。这也应该有效，因为元素的实际渲染直到下一个刻度才会发生。