Possible bug when dynamically updating an IonSlides component

Ionic Framework Ionic Vue
1

I’ve found what might be a bug when using IonSlides and dynamically appending new IonSlide components to it.

You may check it in this CodeSandbox:

All the work here where the issue happens is accomplished in these three files, so you might ignore the rest to inspect how I implemented the code that fails:

  • src/views/Tab1.vue (holds the code for the first tab, in which the issue happens)

  • src/servicios/moviesService.ts (service for the external API)

  • src/components/SlideShowPares.vue (subcomponent for the slides)

The last IonSlides in Tab1, which in turn shows two movie items instead of one in each of its IonSlide components, has a final IonSlide with only a button in it. This button allows to load a new page with more movies from the external API, so as to append them in new IonSlide components.

Well, if I click on it, I get this warning:

runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug.

And this error right after:

Uncaught (in promise) DOMException: Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node.

The first warning makes me think it might be a bug.

Any ideas why this is happenning?

2

you cannot dynamically add slide using IonSlides, I believe you will have to use SwiperJS directly

3

But It was possible with Angular. Let me explain. This is an exercise from an Ionic course in Udemy. The difference is that it’s implemented with Angular, and I’m following through with Vue instead.

Only difference here, the instructor used ngFor and I used v-for

4

I finally figured out how to use Ionic and Swiper JS altogether in order to append slides dynamically, as shown here in this simple code:

Besides the Swiper Js documentation, I found this video on Youtube, which turns out to be published by you, and it was very helpful! :

My impressions about having to do it this way, well… it’s too cumbersome, having that Angular does allow to dynamically add new slides in a flash. That’s too bad IMHO. And in this example, I only add new slides just as HTML content, not as new IonSlide components with all their implicit functionality. It makes me kind of back out in favor of switching to Angular. I hope the Ionic team tries to handle this better.