I am currently utilizing the Laravel - VueJS framework.
My goal is to detect the Y position of the mouse scroll and pass it dynamically as a prop to a Navbar component. To achieve this, I set up an eventListener and stored the window.scrollY value in a variable called scrollPos within the data(). Then, I passed scrollPos as a prop to the Navbar component using v-bind:scrollPos="scrollPos". However, the value being passed to the Navbar component remains at 0 and does not update with further mouse scrolling.
<Navbar v-on:scroll="this.changeScrollPos" v-bind:scrollPos="scrollPos" />
mounted() {
console.log('Component mounted.');
window.addEventListener('scroll', function(e) {
this.scrollPos = window.scrollY;
console.log(this.scrollPos);
});
},
data() {
return {
scrollPos: 0
}
},
methods: {
changeScrollPos() {
console.log('Mouse scrolled');
}
}
In the Navbar component, I simply want to display this value in the navigation bar, which is fixed at the top of the page and contains router-links that scroll to specific sections when clicked.
<nav class="nav" id="nav">
<div class="nav-content>
<ul class="nav-items">
<li class="nav-item"><router-link to="/" v-scroll-to="'#section1'">{{ scrollPos }}</router-link></li>
</ul>
</div>
</nav>
<script>
export default {
props: [
"scrollPos"
]
}
</script>
I also attempted to use the
v-on:scroll="this.changeScrollPos()"If anyone can offer insights into why this setup is not functioning as expected and help me in passing dynamic mouse scroll values to the Navbar component, it would be greatly appreciated.
Edit: While similar to Watch window.scrollY changes in Vuejs, the issue discussed there has been resolved. In my case, the challenge lies in passing the real-time changing mouse scroll value to the component so that the Navbar reflects these updates dynamically.