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

[santhanakrishnanstark]

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]

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

[phlegx]

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', () => { ... }