0
207
VistasIntentar reemplazar getElementByID con refs en vue 3 no funcionará
Lo que estoy tratando de hacer
Soy nuevo en Vue y estoy tratando de reemplazar getElementByID con $refs , pero aparece el siguiente error:
errores
Código
Aquí está el HTML:
<router-link to="/" ref="navOpt"> <div ref="activeOpt">Aquí está el guión:
// 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 - check if the navOpt is active and removes css if it is checkActiveRoute() { if (this.navOpt.classList.contains("router-link-active")) { this.activeOpt.classList.remove("hide-active"); } }, // Created - call method on load created() { this.checkActiveRoute(); },Soluciones probadas
He intentado esto pero me dio el mismo error.
¿Alguien puede ayudar con esto? ¡Gracias!
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
los valores de ref se vinculan automáticamente al atributo ref en sus elementos, y no es necesario hacer onMounted(() => this.$refs.navOpt) ya que esto no tiene ningún efecto, también debe usar solo una API (composición u opciones), pero se recomienda usar la API de composición, finalmente defina el método solo como una función que debe llamarse en el gancho onMounted:
setup() { let navOpt = ref(); let activeOpt = ref(); onMounted(() => { checkActiveRoute() }); function checkActiveRoute() { if (navOpt.value.classList.contains("router-link-active")) { activeOpt.value.classList.remove("hide-active"); } } return { navOpt, activeOpt }; },
·
Juan Pablo Isaza
Denunciar
Responde la pregunta