Open tarvitworking opened 4 years ago
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}`" />
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...
Anyone has any idea how to fix this? I am experiencing the same problem here.
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...
It seems the vue-scrollactive.min.js
not the latest, use import Scrollactive from 'vue-scrollactive/src/scrollactive.vue';
and register it manually...
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>
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
}
....
}