Vue.js Vuejs转盘简单示例不工作

我正在使用Vuejs与用于旋转木马。我有最基本的简单转盘组件，来自：

从“vue-carousel-3d”导入{Carousel3d，Slide}；
导出默认值{
名称：“旋转木马包装器”，
组成部分：{
“旋转木马-3d”：旋转木马，
“幻灯片”：幻灯片
},
数据：函数（）{
返回{
幻灯片：7张
}
}
}
#转盘包装器{
轮廓：5px纯红；
}
.转盘-3d-集装箱图{
保证金：0；
}
.carousel-3d-container figcaption{
位置：绝对位置；
背景色：rgba（0,0,0,0.5）；
颜色：#fff；
底部：0；
填充：15px；
字体大小：12px；
最小宽度：100%；
框大小：边框框；
}

---

在for循环的每个幻灯片中传递一个键时出错，但在通过传递

：key=“i”

进行更正后，现在没有错误。但转盘未显示在浏览器中。如果我在开发人员模式下检查，会有旋转木马div，但在浏览器中，只有我为测试目的提供的

2px实心红色轮廓。它在他们家里起作用，但在我家里不起作用。我是Vuejs的新手，所以我可能做错了什么。我在这里遗漏了什么？
示例中有
v-for=“（幻灯片，I）在幻灯片中”：index=“I”
而您有
v-for=“（I，幻灯片）在幻灯片中”：index=“I”
我刚刚将您的代码复制到我的网页包模板中，它只是工作……奇怪。您是否可以使用vue cli启动新项目（使用网页包模板）并尝试将此代码粘贴到app.vue中？
<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>