It's puzzling why I keep encountering a console error in Vue that says "cannot read null of a $ref". Despite having the correct HTML template and adding logic to the script tag as needed, I'm still facing this issue - Cannot read properties of null (reading 'style'). I've defined the template $refs following the guidelines in the Vue documentation, but it seems like Vue is not accepting it. https://codesandbox.io/s/silly-wave-de7yk5?file=/src/components/HelloWorld.vue:0-2494
<template>
<div class="clock">
<div class="clock-face">
<div class="hand secHand" ref="secHand"></div>
<div class="hand minHand" ref="minHand"></div>
<div class="hand hourHand" ref="hourHand"></div>
<div class="circle"></div>
</div>
<select
name="box-1"
id="select"
@Change="selectedHour"
v-model="selectedHour"
>
<option class="option" value="0">0 UTC</option>
<option class="option" value="1">+1 UTC</option>
<option class="option" value="2">+2 UTC</option>
<option class="option" value="3">+3 UTC</option>
<option class="option" value="4">+4 UTC</option>
<option class="option" value="5">+5 UTC</option>
<option class="option" value="6">+6 UTC</option>
<option class="option" value="7">+7 UTC</option>
<option class="option" value="8">+8 UTC</option>
<option class="option" value="9">+9 UTC</option>
<option class="option" value="10">+10 UTC</option>
<option class="option" value="11">+11 UTC</option>
</select>
</div>
</template>
<script>
const secondHand = document.querySelector(".secHand");
const minuteHand = document.querySelector(".minHand");
const hourHand = document.querySelector(".hourHand");
// const select = document.querySelector("#select");
// let selectValue = select.value;
let secHand = this.$refs.secHand;
function setDate() {
const now = new Date();
const seconds = now.getSeconds();
const secondsDegrees = (seconds / 60) * 360 + 90;
this.secHand.style.transform = `rotate(${secondsDegrees}deg)`; // getting the error at this line
if (secondsDegrees === 90) {
secHand.style.transition = "none";
} else if (secondsDegrees >= 91) {
secHand.style.transition = "all 0.05s cubic-bezier(0.1, 2.7, 0.58, 1)";
}
const minutes = now.getMinutes();
const minutesDegrees = (minutes / 60) * 360 + 90;
minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
const hours = now.getHours();
let newHour = hours + selectValue;
const hoursDegrees = (newHour / 12) * 360 + 90;
hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
}
setInterval(setDate, 1000);
export default {
name: "HelloWorld",
data() {
return {
selectedHour: "",
};
},
props: {},
};
</script>