반응형
vue.js carousel-3d에 데이터가 표시되지 않음
나는 Vue Carouzel 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"
}
]
그slide구성 요소에는 a가 필요하다.index받침대
<slide v-for="(post, i) in posts" v-bind:key="post.id" v-bind:title="post.title" :index="i">
Vue Carouzel 3d 가이드에서 언급된 바와 같이:
슬라이드 구성 요소의 인덱스 속성은 필수 속성이며 0부터 시작하는 모든 슬라이드에 대해 인덱스 속성을 전달해야 함을 명심하십시오.
색인은 슬라이드가 나타나는 순서를 결정한다.인덱스를 수동으로 설정할 수 있지만 위의 예에서는 어레이 인덱스를 슬라이드 인덱스로 설정하십시오.
나는 또한 너의 코드를 바탕으로 작동하는 JSFiddle을 만들었다.
참조URL: https://stackoverflow.com/questions/54983339/vue-js-carousel-3d-is-not-showing-data
반응형
'Programing' 카테고리의 다른 글
| MD 크기의 장치에 대해서만 요소 표시 (0) | 2022.03.23 |
|---|---|
| 뉴라인 없이 인쇄(인쇄 'a'), 인쇄 공간, 제거 방법? (0) | 2022.03.23 |
| 환원기(저감-라우터)의 현재 위치에 액세스하는 방법? (0) | 2022.03.23 |
| 현을 정수로 변환하는 방법? (0) | 2022.03.23 |
| Python 3 ImportError: 'ConfigParser'라는 이름의 모듈 없음 (0) | 2022.03.23 |