The vue-infinite-loading plugin is not working. What have I done wrong?

Question

JavaScript

I'm working on an endless scroll for an online store. I installed the plugin, started everything, wrote methods for event handling, and then bam

[Vue warn]: Error in callback for immediate watcher "forceUseInfiniteWrapper": "TypeError: Cannot read property 'tagName' of null"

found in

---> at InfiniteLoading. vue


warn @ vue.js:634
logError @ vue.js:1893
globalHandleError @ vue.js:1888
handleError @ vue.js:1848
Vue.$watch @ vue.js:4941
mounted @ infinity-scroller.min.js?v =29a5a718e1d133e301623841a8072041e2475cdc:4083
invokeWithErrorHandling @ vue.js:1863
callHook @ vue.js:4214
insert @ vue.js:3146
invokeInsertHook @ vue.js:6335
patch @ vue.js:6552
Vue._update @ vue.js:3940
updateComponent @ vue.js:4061
get @ vue.js:4472
Watcher @ vue.js:4461
mountComponent @ vue.js:4068
Vue.$mount @ vue.js:9038
Vue.$ mount @ vue.js:11923
(anonymous) @ damen:4205
vue.js:1897 TypeError: Cannot read property 'tagName' of null
at VueComponent.getScrollParent (infinity-scroller.min.js?v=29a5a718e1d133e301623841a8072041e2475cdc:4083)
at VueComponent .getScrollParent (infinity-scroller.min.js?
v=29a5a718e1d133e301623841a8072041e2475cdc:4083)
at VueComponent.getScrollParent (infinity-scroller.min.js v = 29a5a718e1d133e301623841a8072041e2475cdc:?4083)
at VueComponent.getScrollParent (infinity-scroller.min.js v = 29a5a718e1d133e301623841a8072041e2475cdc:? 4083)
AT VueComponent.getScrollParent (by infinity-scroller.min.js ? v = 29a5a718e1d133e301623841a8072041e2475cdc: 4083)
AT VueComponent.getScrollParent (by infinity-scroller.min.js v = 29a5a718e1d133e301623841a8072041e2475cdc:? 4083)
AT VueComponent.getScrollParent (by infinity-scroller.min.js v = 29a5a718e1d133e301623841a8072041e2475cdc:? 4083)
AT VueComponent.getScrollParent ( infinity-scroller.min.js?v=29a5a718e1d133e301623841a8072041e2475cdc:4083)
at VueComponent.getScrollParent (infinity-scroller.min.js?v=29a5a718e1d133e301623841a8072041e2475cdc:4083)

I thought the plugin developers screwed up already. I created an empty project and tested it. Everything is working. What's wrong?

import InfiniteLoading from "vue-infinite-loading";

Vue.use(InfiniteLoading);

/////////////////////

Vue.component("scroller", {
///////////

        infiniteHandlerBottom($state)
        {
            this.request.done(data =>
            {
                if (data && data.options)
                {
                    this.bottomPageCount++;
                    this.list = this.list.concat(this.arrayProcessor(data));
                    $state.loaded();
                }
                else
                {
                    $state.complete();
                }
            });
        },

/////////

<infinite-loading direction="top" @infinite="infiniteHandlerTop">
   <div slot="spinner">{% include "Ceres::ItemList.Partials.LoadingAnimation" %}</div>
   </infinite-loading>

Answer 1

Perhaps the problem is that infiniteHandlerTop is specified as the handler, and infiniteHandlerBottom is defined in the component.