2017-09-18 7 views
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可能性も

+0

あなたは 'この$ nextTick(()=> { this.installOwlCarousel() })'しようとしたしましたか? – talkhabi

+0

こんにちは@ Damon.s、私は試してみましたが、まだ動作しませんでした。 私のコードに何が問題なのか分かりません – jrpikong

答えて

0

をループしたエラーではありませんこのようなY何か:。

mounted: function(){ 
    this.$http.get('v2/promotion', {headers: getHeader()}) 
    .then(response => { 
     this.sliders = response.body.data 
     Vue.nextTick(function(){ 
      this.installOwlCarousel(); 
     }.bind(this)) 
    }).catch((err)=>{ 
    if(err) console.log(err) 
    }) 
},