Bootstrap Vue scrollspy 无法处理动态数据。检查时，所有元素在通过时一一处于活动状态（突出显示）

Question

我有一个 Vue 应用程序，它根据我的 JSON 文件中的组件类型（标题、文本、图像）显示内容。我需要在包含我的标题的 Header 组件上滚动间谍。

我正在使用 Bootstrap Vue Scrollspy (https://bootstrap-vue.js.org/docs/directives/scrollspy/)，但我遇到了滚动间谍问题，例如在到达引用项时突出显示菜单项。在检查我的 CSS 时，每次我向下滚动到第二个标题时，边栏中的第二个标题就会变为活动状态（这很好），但我的第一个标题仍然保持活动状态。通常，第一个标题应该恢复正常。但就我而言，当我到达页面底部时，我的所有标题都在我的侧边栏中处于活动状态。也许是因为动态数据，因为 Vue 将它们都视为不同的组件，它并不真正知道引用的项目已经通过了？我尝试在<div>、<section> 中包装我的标题组件，但似乎没有任何效果。将不胜感激一些帮助。谢谢！

这就是我所拥有的：

<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>

Answer 1

您需要将您的 v-b-scollspy 指令移动到您的侧边栏包装元素：

<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>