In my application built with Vue, content is displayed based on the component type (Header, Text, Image) in a JSON file. I am looking to implement scroll spy functionality specifically for the Header component containing headings.
I have attempted to use Bootstrap Vue Scrollspy () but encountered issues with proper scrollspying behavior. When scrolling down to view the second header, it correctly becomes active in the sidebar menu, however, the first header remains highlighted. Instead of reverting back to normal, all headers remain active when reaching the bottom of the page. This may be due to Vue treating each header as a separate component, causing confusion about which items have been passed. I've tried wrapping the Header Component in divs and sections without success. Any suggestions would be greatly appreciated. Thank you!
This is a snippet of my code:
<template>
<div>
<div v-sticky class="sidebar_content">
<h5>Side Bar</h5>
<div
v-for="(item, index) in article.mainContent['en']"
id="side_bar_list"
:key="index"
>
<div v-if="item.component === 'heading'"> <--- Scrollspy menu on my sidebar
<b-list-group v-b-scrollspy>
<b-list-group-item
:href="`#header-${index}`"
>{{ item.settings.text }}</b-list-group-item
>
</b-list-group>
</div>
</div>
<div v-for="(item, index) in article.mainContent['en']" :key="index">
<image-component v-if="item.component === 'image'">{{
item.settings.image.path
}}</image-component>
<header-component <--- This is what I am scrollspying on
v-if="item.component === 'heading'"
:id="`header-${index}`"
>{{ item.settings.text }}</header-component>
<text-component
v-if="item.component === 'text'"
>{{ item.settings.text }}</text-component>
</div>
</div>
</template>