0
HTMLスライダのハードコードがうまくいけば、vue jsのowlcarouselに問題がありますが、データフォームのAPIスライダを表示しないと表示されない場合は、 このコード: HTMLコード:問題Owl Carousel with Vue.js
<div class="wrap-item owl-carousel owl-theme" data-pagination="false" data-autoplay="true" data-navigation="true" data-itemscustom="[[0,1]]" id="slider">
<div v-for="slider in sliders" class="item-slider item-slider5">
<div class="banner-thumb"><a href="#"><img :src="'https://s3-ap-southeast-1.amazonaws.com/monjars3/' + slider.s3ImagePath" alt="" /></a></div>
<div class="banner-info text-center">
<a href="#" class="btn-arrow color">shop now</a>
</div>
</div>
</div>
JSスクリプト:
<script>
import {getHeader} from '../../env'
export default {
data() {
return {
sliders:[]
}
},
methods: {
installOwlCarousel: function(){
$('.owl-carousel').owlCarousel({
items: 4,
loop: true,
margin: 10,
autoplay: true,
autoplayTimeout: 900,
autoplayHoverPause: true,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 3,
nav: false
},
1000: {
items: 5,
nav: true,
loop: false,
margin: 20
}
}
});
}
},
mounted: function(){
this.$http.get('v2/promotion', {headers: getHeader()})
.then(response => {
this.sliders = response.body.data
this.$nextTick(function() {
this.installOwlCarousel()
})
}).catch((err)=>{
if(err) console.log(err)
})
},
}
</script>
だけ表示されませんが、私は要素ファイルを検査した場合はたぶん、あなたはTR可能性も
あなたは 'この$ nextTick(()=> { this.installOwlCarousel() })'しようとしたしましたか? – talkhabi
こんにちは@ Damon.s、私は試してみましたが、まだ動作しませんでした。 私のコードに何が問題なのか分かりません – jrpikong