问题描述
我正在使用 ，并通过外部API调用获取动态数据。 但是每当我使用
components: {
'carousel-3d': Carousel3d.Carousel3d,
'slide': Carousel3d.Slide
},
无法查看数据。 我想在轮播滑块中获取视频名称和视频网址。 请帮忙
<!doctype html> <html> <body> <div id="blog-post-demo" class="demo"> <carousel-3d > <slide v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title"> </slide> </carousel-3d> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.8/vue.js"></script> <script src='https://rawgit.com/Wlada/vue-carousel-3d/master/dist/vue-carousel-3d.min.js'></script> <script> Vue.component('slide', { props: ['title'], template: '<h3>{{ title }}</h3>', }) new Vue({ el: '#blog-post-demo', data: { posts: [] }, created: function () { var vm = this fetch('http://localhost/WCFCrawler/Service1.svc/GetData') .then(function (response) { return response.json() }) .then(function (data) { vm.posts = data }) } }) </script> </body> </html>
json格式
[
{
"src":"http:\/\/localhost\/WCFCrawler\/Videos\/Business - Copy.mp4",
"title":"Business - Copy"
},
{
"src":"http:\/\/localhost\/WCFCrawler\/Videos\/Business.mp4",
"title":"Business"
},
{
"src":"http:\/\/localhost\/WCFCrawler\/Videos\/Wildlife.wmv",
"title":"Wildlife"
}
]
1楼
slide组件需要一个index道具。
<slide v-for="(post, i) in posts" v-bind:key="post.id" v-bind:title="post.title" :index="i">
如指南中所述：
请记住，幻灯片组件上的index属性是必填属性，您需要为每张从0开始的幻灯片传递该属性
索引确定幻灯片的显示顺序。您可以手动设置索引，但是在上面的示例中，我将数组索引设置为幻灯片索引。
我还根据您的代码制作了一个可工作的 。