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

Question

我有一个 Vue 应用程序，它根据我的 [= 中的组件类型（Header、文本、图像）显示内容38=] 文件。我需要滚动监视包含我的标题的 Header 组件。

我正在使用 Bootstrap Vue Scrollspy ( https://bootstrap-vue.js.org/docs/directives/scrollspy/) 并且我在滚动间谍方面遇到了问题，例如在菜单项的突出显示中达到参考项目。在检查我的 CSS 时，每次我向下滚动到第二个 header 时，我侧边栏中的第二个 header 就会激活（这很好）但我的第一个 header 仍然保持活跃。通常，第一个 header 应该会恢复正常。但就我而言，当我到达页面底部时，我所有的 header 都在我的侧边栏中处于活动状态。也许是因为动态数据，因为 Vue 将它们都视为不同的组件，它并不知道引用的项目已经通过了？我尝试将我的 Header 组件包装在 <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>

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

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

css

scrollspy

vue.js

vue-component

bootstrap-vue