Question

我正在使用带有Vue-carousel-3d的Vuejs作为轮播。我有one of the examples中最基本的简单轮播组件：

<template>
    <div id="carousel-wrapper">
        <carousel-3d>
            <slide v-for="(i, slide) in slides" :index="i" :key="i">
                <img src="https://placehold.it/360x270">
            </slide>
        </carousel-3d>
    </div>
</template>

<script>
    import { Carousel3d, Slide } from 'vue-carousel-3d';

    export default {
        name: 'carousel-wrapper',
        components: {
            'carousel-3d': Carousel3d,
            'slide': Slide
        },
        data: function () {
            return {
                slides: 7
            }
        }
    }
</script>

<style scoped>
    #carousel-wrapper {
        outline: 5px solid red;
    }

    .carousel-3d-container figure {
        margin: 0;
    }

    .carousel-3d-container figcaption {
        position: absolute;
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        bottom: 0;
        padding: 15px;
        font-size: 12px;
        min-width: 100%;
        box-sizing: border-box;
    }
</style>

在for循环中传递每张幻灯片中的密钥时出错，但在通过传递:key="i"进行纠正后，现在没有错误。但是旋转木马没有在浏览器中显示。如果我在开发者模式下进行检查，则会有轮播div，但在浏览器中，我只提供了2px solid red outline用于测试目的。它在他们的example page工作，但不在我的工作。我是Vuejs的新手所以我可能做错了什么。我在这里缺少什么？

Vuejs轮播简单的例子不起作用

0 个答案: