将OwlCarousel与Vue.js一起使用的问题

Question

我正在使用vue.js和OwlCarousel,每次我使用旋转木马的v-for时它都没有显示旋转木马的样式,它只显示列中的图像.

这是对API的请求:

<script>
export default {
  data: {
    videos_p: []
  },
  mounted() {
    axios.get("xxxxxxxxxxx")
      .then(response => {
        this.videos_p = response.data
        console.log(this.videos_p)
      })
  }
}

$(document).ready(function() {
  var owl = $('.owl-carousel');
  owl.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
      }
    }
  });

})
</script>

这是html:

  <section id="demos">
    <div class="row">
      <div class="large-12 columns">
        <div class="owl-carousel owl-theme">
          <div class="item" v-for="video in videos_p">
            <img v-bind:src="video.image_url">
          </div>
        </div>
      </div>
    </div>
  </section>

但每次我使用vue它都没有显示旋转木马它只显示列中的图像,但如果我使用这样的例子它工作正常:

  <section id="demos">
    <div class="row">
      <div class="large-12 columns">
        <div class="owl-carousel owl-theme">
      <div class="item">
        <img src="http://placehold.it/300x150&text=FooBar1">
      </div>
      <div class="item">
        <img src="http://placehold.it/300x150&text=FooBar1">
      </div>
      <div class="item">
        <img src="http://placehold.it/300x150&text=FooBar1">
      </div>
      <div class="item">
        <img src="http://placehold.it/300x150&text=FooBar1">
      </div>
      <div class="item">
        <img src="http://placehold.it/300x150&text=FooBar1">
      </div> -->
        </div>
      </div>
    </div>
  </section>

我知道哪里弄错了?????

Answer 1

您正在寻找的是Vue-nextTick

发生的事情是JS在axios发送响应之前执行你的$().owlCarousel,因为你不知道何时收到响应你需要等到收到axios的响应然后立即在Vue中执行代码.nextTick();

另一个问题是this没有指向Vue实例,axios()所以你需要创建一个变量并存储this它.

在您的方法中,在调用axios回调后,添加以下内容:

var vm = this; //declare this just BEFORE calling axios();
// The below are inside axios.then()
vm.videos_p = response.data;
Vue.nextTick(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
      }
    }
  });
}.bind(vm));

然后完全删除$(document).ready();

我会继续前进并method: {}在VueJS中制作一个,然后调用它installOwlCarousel然后在我的中调用它process.nextTick().就像是:

data: {
 ....
},
method: {
 installOwlCarousel: function(){
  $('.owl-carousel').owlCarousel({
   //my options
  });
 },
 mounted: function(){
  var vm = this;
  axios.get('...xx..')
   .then((res)=>{
    vm.videos_p = res.data;
    Vue.nextTick(function(){
     vm.installOwlCarousel();
    }.bind(vm));
   })
   .catch((err)=>{
    if(err) console.log(err);
   });
 }
}

希望这可以帮助.