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

Posted 2023-02-23

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

【英文标题】：Bootstrap Vue scrollspy not working on dynamic data. On inspection, all elements are active(highlighted) one by one when passed

【发布时间】：2020-03-25 16:03:54

【问题描述】：

我有一个 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>

【问题讨论】：

将 v-b-scrollspy 指令移动到 <div v-sticky class="sidebar_content"> 包装元素，而不是每个单独的列表组项链接上。

【参考方案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>