vuejs unexpected content behavior when changing array of child components with slots

Question

I want to make a custom carousel which displays multiple slides at once and moves by one slide on a button press. In the main view this is how it is defined:

<MultiItemCarouselComponent>
  <CarouselItemComponent title="i am the first child">
    I am some text content of the first slide
  </CarouselItemComponent>
  <CarouselItemComponent  title="i am the second child">
    I am some text content of the second slide
  </CarouselItemComponent>
  <!-- arbitrary number of additional items. This can also be other components or standard html elements -->
</MultiItemCarouselComponent>

The important part of the MultiItemCarouselComponent is as follows:

  <div class="container-fluid px-0 multi-item-carousel">
    <div class="d-inline-flex multi-item-carousel-inner" ref="multiItemCarouselContainer">
      <div class="me-3" v-for="(child, index) in childComponents" :key="index">
        <component :is="child" />
      </div>
    </div>
  </div>

With a button I can trigger a function called transitionNext() in my script section. This will copy the first item of my child components to the end of the array and handle the animations:

<script setup>
import { useSlots, ref } from 'vue'

var slots = useSlots()
const childComponents = ref(null)
childComponents.value = slots.default()

const multiItemCarouselContainer = ref(null)
const translateAmount = 100 / (childComponents.value.length + 1)

function transitionNextFinished() {
  childComponents.value.shift()
  multiItemCarouselContainer.value.id = null
  multiItemCarouselContainer.value.style.transition = 'none'
  multiItemCarouselContainer.value.style.transform = 'none'
  multiItemCarouselContainer.value.removeEventListener('transitionend', transitionNextFinished)
}

function transitionNext() {
  var firstChildElement = childComponents.value[0]
  childComponents.value.push(firstChildElement)
  multiItemCarouselContainer.value.id = 'transitionNextElement'
  multiItemCarouselContainer.value.style.transition = 'transform .6s ease-in-out'
  multiItemCarouselContainer.value.style.transform = 'translateX(-' + translateAmount + '%)'
  multiItemCarouselContainer.value.addEventListener('transitionend', transitionNextFinished)
}
</script>

All of this works as expected...apart from the slot content of the CarouselItemComponent. After the transition is finished, these seem to be updated to their original order. This means after the transition the pages shows:

________________________  _______________________
|i am the second child |  |i am the third child |
|______________________|  |_____________________|
|I am some text        |  |I am some text       | ...
|content of the first  |  |content of the second| 
| slide                |  | slide               |
------------------------  -----------------------

I am assuming this is due to some render update vuejs does under the hood and my way of copying and moving the last array item to the 0th position is problematic, but I am unsure how to solve this problem. The only solution a can come up with at the moment is to pass the content of the child components as parameter as well (just like the title), but I would like to keep the flexibility slots provide.

Answer 1

I have found a solution to my problem, although I am not quite certain it is the best possible one:

Instead of moving the dynamic components around, I used named slots, loop through the names in the carousel and use them as keys to dynamically render the slots in the order I want. With this I only need to move and handle the array of keys instead of full objects. Here are the important parts of the code:

App.vue

<MultiItemCarouselComponent>
    <template #firstslide >
      <CarouselItemComponent title="i am the first child">
        I am some text content of the first slide
      </CarouselItemComponent>
    </template>
    <template #secondslide >
      <CarouselItemComponent  title="i am the second child">
        I am some text content of the second slide
      </CarouselItemComponent>
    </template>
      <!-- arbitrary number of additional items. This can also be other components or standard html elements -->
</MultiItemCarouselComponent>

MultiItemCarouselComponent.vue

<script setup>
import { useSlots, ref } from 'vue'

var slots = useSlots()
const childComponents = ref(null)
childComponents.value = Object.keys(slots)


// other stuff

<script>

<template>
    <!-- other stuff -->

    <div class="d-inline-flex multi-item-carousel-inner" ref="multiItemCarouselContainer">
      <div class="me-3" v-for="child in childComponents" :key="child">
        <slot :name="child"></slot>
      </div>
    </div>
    
    <!-- other stuff -->
</template>

Adds the hassle of wrapping everything in named templates, but lets me keep the flexibility of adding and content to my child components.