[Vuejs]-Bootstrap Vue scrollspy not working on dynamic data. On inspection, all elements are active(highlighted) one by one when passed

by

1👍

✅

You need to move your v-b-scollspy directive to your sidebar wrapper element:

<div v-sticky class="sidebar_content" v-b-scrollspy>
  <h5>Side Bar</h5>
  <b-list-group id="side_bar_list">
    <template v-for="(item, index) in article.mainContent['en']">
      <b-list-group-item
        v-if="item.component === 'heading'"
        :key="index"
        :href="`#header-${index}`"
      >{{
        item.settings.text
      }}</b-list-group-item>
    </template>
  </b-list-group>
</div> <!-- end of side bar -->

<!-- main content divs -->
<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
    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>
👤Troy Morehouse

Leave a comment