Forum : Remplacement de $children dans Vue 3

Bonjour, je suis actuellement en train de suivre le tuto de Grafikart sur VueJS 2 mais je le mets en application sur Vue 3 (car mon besoin sera d'utiliser Vue 3).

Mon problème est que la propriété $children n'existe plus dans Vue 3. Dans la doc, ils parlent d'utiliser $ref à la place. J'ai essayé pas mal de choses mais étant débutant en Vue, je n'y arrive pas.

Contexte : Vidéo de formation (direct au timecode).

Le composant Carousel contient des enfants directs, les composants CarouselSlide.

// Compostant Carousel :
export default {

  // [...]

  mounted() {
    // Je voudrais faire marcher cette ligne sur Vue 3 :
    this.slides = this.$children

    this.slides.forEach((slide, i) => {
      slide.index = i;
    });
  },
};

Ce que je souhaite

Je ne veux pas forcément la solution pour ce problème, mais si vous avez des exemples pour faire des choses similaires avec Vue 3 (lister et récupérer sous forme d'objets composants les enfants), je suis preneur.
Ça m'aidera déjà à avancer.

Merci.

2 réponses

BurnItAll

Réponse acceptée

Salut,

Il te suffit d'utiliser l'attribut "ref" sur l'élément (html) root de ton composant puis d'apeller les éléments enfants avec _.children :

<template>
    <div ref="carousel">
        <slot>
            <!--
            <div>Slide 1</div>
            <div>Slide 2</div>
            -->
        </slot>
    </div>
</template>

Functional API

<script>
export default {
    data: () => ({
        slides: []
    }),
    mounted() {
        const { carousel } = this.$refs
        this.slides = carousel.children // HTMLCollection[div, div]
        this.slides.forEach((slide, i) => {
            console.log(slide, i)
        })
    }
}
</script>

Composition API

<script>
import { ref, onMounted } from "vue"
export default {
    setup() {
        const carousel = ref(null)
        onMounted(() => {
            const slides = carousel.value.children // HTMLCollection[div, div]
            slides.forEach((slide, i) => {
                console.log(slide, i)
            })
        })

        return { carousel }
    }
}
</script>

Florian Journeau

Auteur

Super !
Merci beaucoup BurnItAll ! 🙂