How to properly use v-for on ion-slide?

Ionic Framework Ionic Vue
1

Hello guys,

I have a code where initially i have 2 slides. When user swipes i want to add 2 more slides. But when i do it like in the code bellow i get an error which i do not understand :

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

Here is what i have tried and what gives me this error :

<ion-slides  :options="slideOpts"  @ionSlideDidChange="range += 2">
  <ion-slide v-for="i in range" :key="i">
    {{ i }}
  </ion-slide>
</ion-slides>

If i do something something similar in only vue, like having a list and adding 2 more items each time button is clicked it works. But i guess this comes from me not understanding ion-slide component in full.

Basically my goal is for user to have 2 slides initially in ion-slides and then after his swipe i want to generate more slides. This is due to having large data and i dont want to generate all the slides immediately since it will take more resources and would slow down my app.

If you have any suggestion i would really appreciate it! Thanks!

2

:key has to be a unique value… assuming

i ={ 
          "id": "1",
          "slide": "data"
           }

then :key should be i.id

3

I am afraid that is not a problem since key is unique. It is always different number.
I did give key more randomness just to check( i went for i + Date.now() ) but it didnt help.

4

I dont understand what this means??

5

As per the MDN docs, the Node.insertBefore() method inserts a node before a reference node as a child of a specified parent node .

Now the ionSlideDidChange is emitted after the active slide has changed… which mean the parent node on which insertBefore() was called will be changed… and the child node waiting to be appended will get a new location… or specifically a second location on the document… which is not allowed as per the MDN docs…

The issue here is the call stack you might wanna try using
ionSlidePrevEnd – Emitted when the previous slide has ended.
OR
ionSlideWillChange – Emitted before the active slide has changed.

1 Like
6

This has so much sense, thanks for this. I will try it out and give feedback.

7

Its just poor example from me. I meant when i do something similar in vue it work.
Like having v-for=“item in items” and then dynamically(for example on button click) adding more records in items array which results in parent item on which v-for is used on to make more child items since items array has grown.
I dont know if i explained it better now ,sorry.

But however it is not a good exmaple when i think better now. I only mentioned it since i thought something was wrong with my v-for but i think facts presented by @nvispute have way more sense.

8

This didnt work unfortunetely, i still get the same error. I even tried to load more data when swiper is initialized so nothing is changed but again i get error. I have no idea what could fix this.

9

Seems to me that event emitted by Ionic components are too low [FIFO based call stack] for this kind of thing.

Maybe, as you said that using ONLY “Vue” you get the desired result… you should try emitting a custom event from an empty div tag that wraps the ion-slide

something like this

<ion-slides  :options="slideOpts" >
<div @customDirective="range += 2">
  <ion-slide v-for="i in range" :key="i">
    {{ i }}
  </ion-slide>
</div>
</ion-slides>

Almost forgot… thus Editing the comment…
if you end up using the custom event then you will need to watch that array in data prop for the changes… and also hook the update method of the ion-slider inside of your custom event

Ref this for Update mehod

1 Like
10

When i wrap ion-slide inside div component loses its sliding effects. I cannot swipe or use component correctly after this. ;/

11

Well then i guess we will need to take a longer route then…

On Ion-sildes listen for the

ionSlideDidChange which is Emitted after the active slide has changed.
then hook up a customMethod where we apply your logic

Example 1
If you wish to retain the current Active index then in the customMethod
you will need to use getActiveIndex which return a promise, on its .then() block you put your logic and call update which will notify the ion-slide that you have changed the underlying slider

Quote from documentation for update() method

Update the underlying slider implementation. Call this if you’ve added or removed child slides.

Example 2
if you don’t need the active Index then you use getSwiper which shall Grant you access to the full Swiper API instance, again this begin a promise on its .then() you do the same step as example 1.

1 Like
12

I will try this as soon as i get home.
Thank you so much for your time and advices, i really appreciate it!!

13

Still no progress, again i get the same error. Really cant tell what change will make this work.

14

Can you share the code or maybe add me to the git repo

15

Last thing i tried is this :


<template>
  <ion-page>
    <ion-content>
	<ion-slides ref="slides" @ionSlideDidChange="addSlide">
  	  <ion-slide v-for="i in range" :key="i">
    	    {{ i }}
  	  </ion-slide>
	</ion-slides>
    </ion-content>
  </ion-page>
</template>

<script>
import { defineComponent, ref } from 'vue';
import {
  IonSlides,
  IonSlide,
}                                                from '@ionic/vue';


export default defineComponent({
  name: 'Home',
  components: {
    IonSlides,
    IonSlide,
  },
  setup() {
    const range = ref(3);
   
    const addSlide = () => {
      slides?.value?.$el.getSwiper().then(() => {
	range.value += 1;
      	slides?.value?.$el.update();
      })

    };

    return {
      range,
      addSlide
    };
  },
});
</script>

If you are referring to actual code that i write i am unable to do that at this time, my apologizes.

16

I saw another thread about this saying that there was no problem when using swiperjs directly. Since i didnt find any solution and couldn’t wait any longer i decided to give this a try and it worked.

Here is documentation : Swiper Vue.js Components

Note:
-When using @reachEnd event swiper breaks for some reason and doesnt work as intended, using slideChange however doesnt

IonSlides uses swiper under the hood but this logic doesnt work on it however it works on swiper/vue component. I dont know why is this probably there is confilcts internally in IonSlide component.

Thanks to @nvispute for trying to help, i really do appreciate it!

Closed!

1 Like
17

Great to hear you found a solution… it is quite tricky problem though :slight_smile:

1 Like