Quiero dar una etiqueta de detalles al atributo abierto cuando es hijo, en este caso el <router-link> está activo. Así que creé una etiqueta de detalles...
<!-- ...template --> <details> <summary class="flex items-center" > <span class="ml-3 text-sm font-medium">Open</span> </summary> <nav class="ml-5 flex flex-col"> <router-link to="/detail" class="flex items-center" > <span>Detailview</span> </router-link> <router-link to="/about" class="flex items-center" > <span>About it</span> </router-link> </nav> </details> Ahora hice una función para obtener todos los enlaces de enrutador y el filtro que tiene los detalles de parent/parentNode. Probé y funciona! Pero ahora solo quería el enlace del enrutador con class="router-link-active" adentro y arroja errores:
TypeError no capturado: detail_tags[i] no está definido
<script setup> import { onMounted } from "vue"; onMounted(() => { const detail_tags = document.querySelectorAll("a"); for (let i = 0; i <= detail_tags.length; i++) { if ( detail_tags[i].parentElement.parentElement.tagName == "DETAILS" && detail_tags[i].classList.contains("router-link-active") ) { detail_tags[i].parentElement.parentElement.open = true; } } }); </script>¿Cómo puedo resolver este problema para abrir solo los detalles de qué enlace de enrutador secundario tiene clase de enlace de enrutador activo?
Es el clásico error "off by 1": los elementos de Array se cuentan desde 0, por lo que no debe hacer referencia a un elemento cuyo índice sea igual o mayor que el número de elementos de Array:
for (let i = 0; i <= detail_tags.length; i++) { // replace the "<=" with "<"Normalmente usaría el enrutador de la siguiente manera
<div id="app"> <nav class="ml-5 flex flex-col"> <router-link to="/detail" class="flex items-center" > <span>Detailview</span> </router-link> <router-link to="/about" class="flex items-center" > <span>About it</span> </router-link> </nav> <!-- component matched by the route will render here, in your case details --> <router-view></router-view> </div>No creo que sea prudente desviarse de este patrón, probablemente terminará con componentes ilógicos.