Is there a way to automatically number components as children of another component?

[joulev]

I'm trying to make a slideshow in Vue 3. Overall, it is functional with the main file looking like this.

<!-- app.vue -->
<script lang="ts" setup>
const current = ref(0);
const maxSlide = 2;
const increment = () => (current.value = Math.min(current.value + 1, maxSlide));
const decrement = () => (current.value = Math.max(current.value - 1, 0));

provide("current", current);

// for the purpose of this minimal example
onMounted(() => {
  window.addEventListener("keydown", e => {
    if (e.key === "ArrowRight") increment();
    else if (e.key === "ArrowLeft") decrement();
  });
});
</script>

<template>
  <div>
    <Slide :slide="0" title="Hello, world!">
      Slide 1
    </Slide>
    <Slide :slide="1" title="Another slide">
      Slide 2
    </Slide>
    <Slide :slide="2" title="Custom reactive component">
      <CustomComponent />
    </Slide>
  </div>
</template>

<!-- Slide.vue -->
<script lang="ts" setup>
defineProps<{ title?: string; slide: number }>();
const current = inject<number>("current")!;
</script>

<template>
  <Transition>
    <div v-if="current === slide">
      <slot />
    </div>
  </Transition>
</template>

However, I have to pass a slide prop to each <Slide> component, and have to update those numbers manually whenever I need to add a new slide. Constant maxSlide also needs to be updated manually. While "this works", it's not good...

Is there any way to somehow update maxSlide automatically according to the number of <Slide> components called, and have slide props passed to <Slide> components automatically without manual effort?

For my specific use case, the <div> in app.vue only has <Slide> as children (no extra markup before or after these slides inside the same <div>), although I am interested in how to number only the <Slide> even with other markup inside the <div> too.

Thank you in advance.

[edison1105]

I did not get your point clearly.
but why not use v-for instead?

[joulev]

Since the styles are not stored in an array, I'm not sure how to use v-for here...