<p><pre class="brush:php;toolbar:false;"><template> <div class="carrousel"> <emplacement></emplacement> <bouton @click="index++">Suivant</bouton> </div> </modèle> <configuration du script> importer { useSlots, onMounted, onUpdated, ref} depuis 'vue' ; const emplacements = useSlots() indice const = réf (0) onMounted(() => { const defaultSlotElements = slots.default() console.log(`Mon emplacement par défaut contient des éléments ${defaultSlotElements.length}.`) }), onUpdated(() =>{ console.log(defaultSlotElements[index]) } ) </script></pre> <p>J'essaie de créer un carrousel basé sur des emplacements. Merci au gars précédent sur Stack Overflow qui m'a aidé à comprendre comment extraire le tableau des emplacements. Maintenant, je suis confronté à un autre problème. Afin de créer le carrousel, je dois en quelque sorte modifier l'index des éléments du tableau afin de pouvoir passer à la diapositive suivante du carrousel. Plus tard, j'ai dû l'injecter dans mon composant diaporama pour que V-show restitue l'emplacement actuel qui est par défaut 0. Mais la valeur de l'index est modifiée par l'instruction v-on qui modifie l'index, elle sélectionne donc l'emplacement suivant ou précédent dans le tableau. Je sais que j'ai choisi un thème complexe dans vue, mais je ne souhaite pas utiliser une version plus simple d'un carrousel basé sur un tableau d'images, car je ne peux pas y ajouter un autre composant. </p> <p>Il s'avère que je ne peux pas sélectionner l'objet suivant dans le tableau simplement en modifiant l'index <code>arr[index]</code>. </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>