I am trying to set the attribute "open" on a details tag when its child, specifically the <router-link>, is active. To achieve this, I have created a details tag...
<!-- ...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>
After creating a function to retrieve all router-links and filter out those that have the parent node as details, I tested it and it seems to work! However, I now want to target only the router-link with the
class="router-link-active"Uncaught TypeError: detail_tags[i] is undefined
<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>
Any suggestions on how to solve this issue and only open the details element when the child router-link has the class "router-link-active"?