I want to give a details tag the attribute open when its child, in this case the <router-link> is active. So I 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>
Now I made a function to get all router-links and filter which has the parent/parentNode details. I tested and it works! But now I only wanted the router-link with the class="router-link-active" inside and it throws errors:
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>
How can I solve this problem to only open the details which child router-link has class router-link-active?
It is the classic "off by 1" error - the elements in Array are counted from 0 so you should not reference an element whose index is equal to or larger than the number of elements in the Array:
for (let i = 0; i <= detail_tags.length; i++) { // replace the "<=" with "<"
Normally you would use the router as followed
<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>
I don't think it's wise to deviate from this pattern, you'll probably end up with illogical components.