Estoy tratando de ver si existe una clase en un elemento dom dentro de mi componente, pero no puedo encontrar la manera de hacerlo dentro del gancho onMounted:
Esta es una versión simplificada de mi plantilla:
<template> <a ref="tabLink" href="#" role="tab" :class="{ chatUpdated: this.chatSessionId === tab.chatSessionId }" > {{ tab.title }} </a> </template>Esta es mi función de configuración:
setup() { const tabLink = ref(null); onMounted(() => { console.log(tabLink.value["0"].classList[0]); }); } Como puede ver, intento consolar. registrar las clases de mi etiqueta <a> en mi plantilla, pero siempre obtengo un valor indefinido. Pensé que el DOM del componente ya estaba allí cuando se llama al gancho onMounted, así que no entiendo por qué obtengo un valor indefinido.
La forma en que buscas la clase está mal.
Necesitas:
const tabLink = ref(); // remove the null from here console.log(tabLink.value.className); // gets all the classes as string console.log(tabLink.value.className.split(" ")); // returns an array of classesDe los documentos de Vue :
Cuando muta el estado reactivo en Vue, las actualizaciones DOM resultantes no se aplican sincrónicamente. En cambio, Vue los almacena en búfer hasta el "siguiente tic" para garantizar que cada componente se actualice solo una vez, sin importar cuántos cambios de estado haya realizado.
En su caso, hay un enlace de clase en <a> que cambia según chatSessionId . El efecto de ese enlace se ve en el siguiente tick.
Espere una llamada a nextTick() para observar el efecto:
👇 onMounted(async () => { 👇 await nextTick() // class list effect is now available console.log(tabLink.value[0].classList[0]) })