<template>
<div class="block" v-if="showBlock" @click="stopTimer" ref="blob">
Click Me!
</div>
</template>
<script>
export default {
props: ['delay'],
data() {
return {
showBlock: false,
timer: null,
reactionTime: 0
}
},
mounted() {
setTimeout(() => {
this.showBlock = true
this.changePosition()
}, this.delay)
},
methods: {
changePosition() {
console.log(this.$refs.blob)
setTimeout(() => {
console.log(this.$refs.blob)
}, 1);
},
}
}
</script>The first ref returns undefined while the second one inside the setTimeout returns the referenced element. I don't believe this is simply because the element hasn't been mounted yet. 1 millisecond cannot possibly make a difference. So, why is the referenced element undefined when the function is first invoked, but if I use a setTimeout, then it works?