使用Vue.js

Question

我有vue js的owlcarousel问题，如果我用HTML滑块的硬编码效果很好，但如果我尝试使用数据表单API滑块不显示， 我的代码： HTML代码：

<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>

找不到错误只是没有显示，但如果我检查元素文件循环好

Answer 1

也许你可以尝试这样的事情：

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)
  })
},