更改数组索引以显示下一张幻灯片-PHP中文网问答

<template>
    <div class="carousel">
        
        <slot></slot>
         <button @click="index++">Next</button>
    </div>

</template>
<script setup>
import { useSlots, onMounted, onUpdated, ref} from 'vue';

const slots = useSlots()
const index = ref(0)
onMounted(() => {
  const defaultSlotElements = slots.default()
  console.log(`My default slot has ${defaultSlotElements.length} elements.`)
  
}),
onUpdated(() =>{
    console.log(defaultSlotElements[index])
}
)

</script>

我正在尝试创建基于插槽的轮播。感谢前一个关于堆栈溢出的人，他帮助我弄清楚了如何提取插槽数组。现在，我正在处理另一个问题。为了创建轮播，我必须以某种方式更改数组中元素的索引，这样我就可以移动到轮播的下一张幻灯片。后来我必须将它注入到我的幻灯片组件中，让 V-show 渲染默认为 0 的当前插槽。但是索引的值会被更改索引的 v-on 指令更改，因此它选择数组中的下一个或上一个槽。我知道我在 vue 中选择了一个复杂的主题，但我不想使用基于图像数组的更简单版本的轮播，因为我无法在其中添加另一个组件。

事实证明，我不能简单地通过更改索引arr[index]来选择数组中的下一个对象。