Я использую Vue Carousel 3D и получаю динамические данные с помощью внешнего вызова API.Но всякий раз, когда я использую
components: {
'carousel-3d': Carousel3d.Carousel3d,
'slide': Carousel3d.Slide
},
, не могу просмотреть данные.Я хочу получить название видео и URL-адрес видео в слайдере карусели.Пожалуйста, помогите
<!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"
}
]