|
我想知道为什么我在控制台vue中得到一个错误-无法读取一个$ref的null。虽然html模板是正确的，并且我根据需要向脚本标记添加逻辑。但仍然得到这个错误-无法读取null的属性（阅读'style'）。我定义模板$refs，因为它是在vue docs中编写的，但它似乎不接受它。https://codesandbox.io/s/silly-wave-de7yk5?file=/src/components/HelloWorld.vue:0-2494
0 UTC
+1 UTC
+2 UTC
+3 UTC
+4 UTC
+5 UTC
+6 UTC
+7 UTC
+8 UTC
+9 UTC
+10 UTC
+11 UTC
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: {},
};
|