[Vuejs]-Calling onscroll event of an element inside the created function

0👍

While moving the event handler to mounted (as suggested by Sovalina in the comments) works, it isn’t the Vue way to do this.

With Vue, you should embed the event handler information inside the html template instead:

(Basing this on the code you posted on jsfiddle)

<div id="vueapp">
    <div id="app" @scroll="handleScroll">
    </div>
</div>

JavaScript:

new Vue({
    el : '#vueapp',
    data : {
        showSearchBar : 0
    },
    methods: {
        handleScroll(evt) {
            if(evt.target.scrollTop >= 10) {
                this.showSearchBar = 1;
            }else{
                this.showSearchBar = 0;
            }
        }
    },
});

Leave a comment