search

PeachScript / vue-infinite-loading

An infinite scroll plugin for Vue.js.
https://peachscript.github.io/vue-infinite-loading/
MIT License
2.66k stars 366 forks source link

Multiple infinite-loading component on same page not working as expected in vue 3 #327

Open santhanakrishnanstark opened 1 year ago

santhanakrishnanstark commented 1 year ago

Version

3.0.0-alpha.0-0

Vue.js version

3.2

Reproduction Link

You can check the issue here - https://stackblitz.com/edit/vue-ckn2zu?file=src%2FApp.vue

Steps to reproduce

  1. load the stackblitz page and see the app once it runs. initially it will load the 1st component data, and you can see 2nd component loading icon. once the second component show 'no data available' then first component also affecting.

What is Expected?

Each infinite loading component should run separately with its own set of data.

What is actually happening?

if one component doesn't have the data then other component also showing 'no data available ' error.

phlegx commented 1 year ago

The problem is the eventHub in the code. This emits global events to all subscriber.

phlegx commented 1 year ago

E.g. 

eventHub.$on('$InfiniteLoading:loaded', () => { ... }

should be:

eventHub.$on('$InfiniteLoading:loaded', (ev) => {
  if (!ev || ev.target !== this) return;
  ...
});

Same changes for:

eventHub.$on('$InfiniteLoading:complete', () => { ... }
eventHub.$on('$InfiniteLoading:reset', () => { ... }