Vuetify - How to loop through multiple custom components in a carousel

Question

I was wondering if it is possible to loop through multiple custom components in a carousel in Vueitfy?

I have imported and registered three components in my carousel.vue file below, however, I am not sure how you can loop through all the registered components in the v-carousel-item tag.

What I have in my carousel so far:

<template>  
    <v-carousel
        hide-delimiter-background
        delimiter-icon="mdi-minus"
        width="100%"
        height="700"
    >
        <v-carousel-item
            v-for="(component, i) in components"
            :key= i
            reverse-transition="slide-fade"
            transition="slide-fade"
        >   
        </v-carousel-item>
    </v-carousel>
</template>  

<script>
import Carousel_s1 from './Carousel_s1.vue'
import Carousel_s2 from './Carousel_s2.vue'
import Carousel_s3 from './Carousel_s3.vue'

export default {
    name: 'Carousel',
    components: {
        Carousel_s1,
        Carousel_s2,
        Carousel_s3,
    },
(continue my code ...)

Answer 1

Inside your v-carousel-item you can use Vue's dynamic component mechanism to display the correct one:

<v-carousel-item
  v-for="(component, i) in components"
  :key="i"
  reverse-transition="slide-fade"
  transition="slide-fade"

  <component :is="component"></component>
</v-carousel-item>

(BTW, you also should wrap your key value in quotes, as I did in my sample code)

Please note that this is not a Vuetify-specific feature but works in all Vue code :)