使用 Vue.js 发布 Owl Carousel答案

【问题标题】：Issues Owl Carousel With Vue.js使用 Vue.js 发布 Owl Carousel
【发布时间】：2017-09-18 05:14:35
【问题描述】：

我对带有 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>

没有发现错误只是没有显示，但是如果我检查元素文件循环良好

【问题讨论】：

你试过this.$nextTick( () => { this.installOwlCarousel() })吗？
嗨@Damon.s，我试过了，但还是不行。我不知道我的代码有什么问题

标签： javascript vue.js vuejs2 owl-carousel

【解决方案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)
  })
},

【讨论】：