Ion Slide dynamic update not working.(vue3)

Hello, compared to list v-for loop it can be update the list using states but in ion slides not I receive this error.

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.

Sample code:

      <ion-slides
        ref="showComp"
        class="test"
        @ionSlideReachEnd="addSlides"
        pager="true"
        :options="slideOpts"
        v-else
      >
        <slide
          v-for="content in contents"
          :key="content.id"
          :mediaURI="content.uri"
          :metaProfile="content.meta.profile"
          :metaUID="content.meta.uid"
          :stars="content.star_count"
          :postData="content.postdata"
          :mediaType="content.media_types"
        ></slide>
      </ion-slides>

for the initial slide fetch like getting 5 records it works but if I update the state and concat the existing data with new data like this

data:{id:1},{id:2},{id:3} to data:{id:1},{id:2},{id:3},{id:4},{id:5},{id:6}

resulting to

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.

But this is working with the said situation above the code.
 <ion-list>
          <top-scorer
            v-for="scorer in scorers"
            :key="scorer.id"
            :energy="scorer.score"
            :tor="scorer.id"
            :message="scorer.created_at"
            :icon="scorer.icon"
          ></top-scorer>
   </ion-list>

note: if the slide is in the end it will automatically add data to state and the reactivity will do the rest.

Thanks

2 posts - 1 participant

Read full topic