My Current Vue Dilemma
I am a newcomer to Vue and I'm attempting to swap out the use of getElementByID with $refs, but I keep encountering the following error:
The Issues I'm Facing
Show Me the Code!
Below is the HTML snippet in question:
<router-link to="/" ref="navOpt">
<div ref="activeOpt">
And this is the accompanying script:
// imports
import { ref, onMounted } from "vue";
// setup
setup() {
let navOpt = ref();
let activeOpt = ref();
onMounted(() => this.$refs.navOpt);
onMounted(() => this.$refs.activeOpt);
return { navOpt, activeOpt };
},
// Methods - checking if the navOpt is active and removing css accordingly
checkActiveRoute() {
if (this.navOpt.classList.contains("router-link-active")) {
this.activeOpt.classList.remove("hide-active");
}
},
// Created - calling method on page load
created() {
this.checkActiveRoute();
},
Possible Solutions I've Explored
I have attempted implementing a solution found here, but unfortunately, it led to the same persistent error.
If anyone could offer assistance with this issue, I would greatly appreciate it! Thank you in advance!