I'm currently working on checking if a class exists in a DOM element within my component, but I'm facing some difficulties while trying to achieve this using the onMounted hook:
Below is a simplified version of my template structure:
<template>
<a
ref="tabLink"
href="#"
role="tab"
:class="{ chatUpdated: this.chatSessionId === tab.chatSessionId }"
>
{{ tab.title }}
</a>
</template>
This is how my setup function looks like:
setup() {
const tabLink = ref(null);
onMounted(() => {
console.log(tabLink.value["0"].classList[0]);
});
}
Despite expecting to see the classes of my <a> tag logged out in the console, I keep getting an undefined value. It's puzzling because I assume that the component's DOM should have been loaded by the time the onMounted hook is triggered, so it's unclear why the value is coming out as undefined.