Vue.js infinite Scroll

Question

I wondering if there is any directive for implementing Ajax infinite scroll with vue.js or is there any directive available ?

Any Help would be appreciated.

Answer 1

It has nothing to do with any directive. You need to listen to scroll event and ajax additional items when the user hits bottom of the window/container.

Answer 2

Based on some tutorial code I used, the following demonstrates how to add a listener in a Vue.js component to the scroll event and a method to do something if the user scrolls to the bottom of the window.

Note that when doing window.addEventListener, you must remove it using window.removeEventListener.

Maybe this can help you get started.

created: function () {
    window.addEventListener('scroll', this.handleScroll)
},
destroyed: function () {
    window.removeEventListener('scroll', this.handleScroll)
},
methods: {
    handleScroll: function () {
        this.scrollPos = document.body.scrollHeight - window.innerHeight - document.body.scrollTop;   
        if (document.body.scrollHeight - window.innerHeight - document.body.scrollTop == 0) {
            // load more data here...
        }
    }
}

Answer 3

All jquery components can be integrated with Vue through directives. But if you want people to help, you should provide a jsfiddle example.