<p><pre class="brush:php;toolbar:false;"><template> <div class="carousel"> <slot></slot> <button @click="index++">Weiter</button> </div> </template> <Skript-Setup> import { useSlots, onMounted, onUpdated, ref} from 'vue'; const slots = useSlots() const index = ref(0) onMounted(() => { const defaultSlotElements = slots.default() console.log(`Mein Standard-Slot hat ${defaultSlotElements.length}-Elemente.`) }), onUpdated(() =>{ console.log(defaultSlotElements[index]) } ) </script></pre> <p>Ich versuche, ein Slot-basiertes Karussell zu erstellen. Vielen Dank an den vorherigen Mann von Stack Overflow, der mir geholfen hat, herauszufinden, wie ich das Slots-Array extrahieren kann. Jetzt habe ich es mit einem anderen Problem zu tun. Um das Karussell zu erstellen, muss ich irgendwie den Index der Elemente im Array ändern, damit ich zur nächsten Folie des Karussells wechseln kann. Ich musste dies später in meine Diashow-Komponente einfügen, damit V-Show den aktuellen Slot rendert, der standardmäßig auf 0 steht. Der Wert des Index wird jedoch durch den v-on-Befehl geändert, der den Index ändert, sodass er den nächsten oder vorherigen Steckplatz im Array auswählt. Ich weiß, dass ich in Vue ein komplexes Thema ausgewählt habe, aber ich möchte keine einfachere Version eines Karussells basierend auf einer Reihe von Bildern verwenden, da ich keine weitere Komponente darin hinzufügen kann. </p> <p>Es stellt sich heraus, dass ich das nächste Objekt im Array nicht einfach durch Ändern des Index <code>arr[index]</code> auswählen kann. </p>

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

const slots = useSlots()
const index = ref(0)
const current = ref(null)
onMounted(() => {
  const defaultSlotElements = slots.default()
  current.value = defaultSlotElements[0]
}),
onUpdated(() =>{
    console.log(defaultSlotElements[index])
    }
)  
const render = () => {
    return h('div', { class: 'carousel'}, [
    h('p', `My default slot has ${slots.default().length} elements.`),
    h('div', slots.default()[index.value]),
    h('p', `Picture ${ index.value + 1 }`),
    h('button', { onClick: () => { 
      index.value = index.value + 1 == slots.default().length ? 0 : index.value + 1
    } }, 'Next')
  ]);
};
</script>

<template>
    <render />
</template>