data-section-selector does not work

[tarvitworking]

trafficstars

<scrollactive :offset="50" tag="div" :alwaysTrack="true" :modifyUrl="false" :exact="true">
    <span data-section-selector="#subsection-1" class="scrollactive-item">test1</span>
    <span data-section-selector="#subsection-2" class="scrollactive-item">test2</span>
    <span data-section-selector="#subsection-3" class="scrollactive-item">test3</span>
</scrollactive>

<div id="subsection-1">
    <h2>subsection-1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    Ab, aperiam atque consequuntur culpa cum dolorem doloribus earum error fuga laborum 
    molestias neque nesciunt quaerat quas rem veniam voluptatum! Minus, vel?</p>
</div>
<div id="subsection-2">
    <h2>subsection-2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    Ab, aperiam atque consequuntur culpa cum dolorem doloribus earum error fuga laborum 
    molestias neque nesciunt quaerat quas rem veniam voluptatum! Minus, vel?</p>
</div>
<div id="subsection-3">
    <h2>subsection-3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    Ab, aperiam atque consequuntur culpa cum dolorem doloribus earum error fuga laborum 
    molestias neque nesciunt quaerat quas rem veniam voluptatum! Minus, vel?</p>
</div>

[tbredin]

Exact same error message here. For me I'm using a v-for loop:

<scrollactive>
  <li
    v-for="(item, index) in items"
    :key="index"
    class="scrollactive-item"
    :data-section-selector="`#section${index}`"
  >
    Some content ...
  </li>
</scrollactive>

<img src="mySrc" v-for="(item, index) in items" :key="index" :id="`section${index}`" />

[angryeuan]

I'm getting the same:

<scrollactive :class="$style.Timeline">
  <div
    v-for="(item, i) in activeItems"
    :data-section-selector="`#${item.id}`"
    :key="`timeline-item-${i}`"
    :style="{ top: getOffset(item.date, i) }"
    :class="[$style.Node, 'scrollactive-item']"
  />
</scrollactive>

<article :id="content.id" :class="[$style.Image, 'u-entry']">
  ...
</article>

Works when using the standard tags. Did you guys have any joy fixing? I'm going to investigate further...

[geesoon]

Anyone has any idea how to fix this? I am experiencing the same problem here.

[angryeuan]

I ended up changing packages to this - https://www.npmjs.com/package/vue-intersect

Then using history.pushState to add the hash to the URL

Does the job i need it to do...

[xubaifuCode]

It seems the vue-scrollactive.min.js not the latest, use import Scrollactive from 'vue-scrollactive/src/scrollactive.vue'; and register it manually...

[valentinoli]

I got the same error using v-for on <div> and using data-section-selector. A fix that worked for me was to use <a> tags and the href attribute, although not ideal. I think @xubaifuCode is right, I also noticed that the minified bundle is not up to date.

<scrollactive>
  ...
>
  <div
    v-for="..."
    :key="..."
    :data-section-selector="..."
    class="scrollactive-item"
  >
    ...
  </div>
</scrollactive>

-->

<scrollactive>
  ...
>
  <a
    v-for="..."
    :key="..."
    :href="..."
    class="scrollactive-item"
  >
    ...
  </a>
</scrollactive>

[stanislavhannes]

Like @xubaifuCode mentioned, the minified package isn't the latest one and therefor it won't work with that. I ended up to import the 'vue-scrollactive/src/scrollactive.vue' inside my component where I'm gonna to use it:

import Scrollactive from 'vue-scrollactive/src/scrollactive.vue';

export default { 

components: {
 Scrollactive
}

....

}