Comments (7)
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}`" />
from vue-scrollactive.
It seems the vue-scrollactive.min.js
not the latest, use import Scrollactive from 'vue-scrollactive/src/scrollactive.vue';
and register it manually...
from vue-scrollactive.
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...
from vue-scrollactive.
Anyone has any idea how to fix this? I am experiencing the same problem here.
from vue-scrollactive.
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...
from vue-scrollactive.
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>
from vue-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
}
....
}
from vue-scrollactive.
Related Issues (20)
- scrollContainerSelector not working as expected HOT 1
- Throws Document Query Selector error if hash starts with Number and the webpage is hard refreshed with such hash in URL HOT 1
- transform: translate(200px, 1000px);
- this.scrollContainerSelector is undefined HOT 1
- vue-scrollactive inside a viutify dialog doesn't work HOT 4
- Have a question HOT 1
- dist/vue-scrollactive.min.js is stuck on old release
- Different offset for different elements HOT 1
- Active class applied on page load
- Previous / next functionality
- Local Import Get Error HOT 2
- TypeError: Cannot read property 'substr' of undefined HOT 2
- how to prevent replacing the URL with tag HOT 2
- Scroll itemChange event only fired once
- How to realize horizontal scroll active tab position always visible? HOT 1
- Links do not have a discernible name HOT 1
- specifying scrollContainerSelector causes scroll to jump back to the top HOT 1
- Vue 3? HOT 4
- Stops working if container it scrolled to the top HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-scrollactive.