ismail9k / vue3-carousel

Vue 3 carousel component
https://ismail9k.github.io/vue3-carousel/
MIT License
660 stars 164 forks source link

Create custom component with Carousel causes TypeError #291

Closed miguilimzero closed 1 year ago

miguilimzero commented 1 year ago

I'm trying to create a wrapper component for Carousel on my project. However, the Carousel slot receives a Symbol(Fragment) with the correct as children instead of directly.

It seems that getSlidesVNodes.ts needs another if case to sanitize this situation.

Steps to reproduce the behavior:

TCarousel.vue

<template>
    <Carousel ref="internalCarousel">
        <template #slides>
            <slot />
        </template>

        <template #addons>
            <Navigation />
            <Pagination />
        </template>
    </Carousel>
</template>

<script>
import { Carousel, Navigation, Pagination } from 'vue3-carousel'
import 'vue3-carousel/dist/carousel.css'

export default {
    components: {
        Carousel,
        Navigation,
        Pagination
    },
}
</script>

Page.vue

<TCarousel>
    <Slide v-for="i in [1, 2, 3]" :key="i">
      <p>{{ i }}</p>
    </Slide>
</TCarousel>

Screenshoots

image

miguilimzero commented 1 year ago

What a fast fix! Thanks, @ismail9k!