时间戳

首页 > 解决方案 > 在我的组件生命周期中，何时可以开始访问 this.$refs？

javascript - 在我的组件生命周期中，何时可以开始访问 this.$refs？

问题描述

在加载以下单文件 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似乎还没有注册，所以这会导致错误。加载组件时附加这些事件侦听器的正确方法是什么？

标签： javascripthtmlvue.jshtml5-audio

解决方案

您应该能够在mounted挂钩中访问它。我猜问题出在v-if这里。有没有可能你可以把它改成一个v-show？

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

推荐阅读