When I click on a navigation list item, a class is added and then removed when clicked again. However, the class is being added to all items in the list instead of just one at a time. Additionally, I have a requirement where a click action should perform two tasks (scrolling and adding a class).
<b-navbar class="d-flex flex-column align-items-start>
<b-navbar-brand tag="h3" class="m-0">List Index</b-navbar-brand>
<b-navbar-nav v-for="(linkItem, index) in linkItems" :key="index">
<b-nav-item :class="{ active: isActive }" class="pl-2" @click="scrollTo(`${linkItem.id}`), (isActive = !isActive)">
{{ linkItem.title }}
</b-nav-item>
</b-navbar-nav>
</b-navbar>
The methods used are:
data() {
return {
isActive: false,
linkContent: [] as any
};
},
scrollTo { This is working fine},
activeLink() {
this.isActive = true;
}
}
});
I am seeking assistance to ensure that the class only applies to the currently active element.
Appreciate your help!