如何解决Vuetify-如何在轮播中循环遍历多个自定义组件
我想知道是否可以在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 ...)
解决方法
在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代码:)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。