Question

我想知道是否可以在Vueitfy的轮播中遍历多个自定义组件？

我已经在下面的carousel.vue文件中导入并注册了三个组件，但是，我不确定如何遍历v-carousel-item标签中的所有已注册组件。

到目前为止，我在轮播中拥有的内容：

<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

在v-carousel-item内，您可以使用Vue的动态组件机制来显示正确的组件：

<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>

（顺便说一句，您也应该像在示例代码中一样将key值括在引号中）

请注意，这不是Vuetify特有的功能，但适用于所有Vue代码：）

Vuetify-如何在轮播中循环遍历多个自定义组件

1 个答案: