将 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 没有指向 axios() 中的 Vue 实例，所以你需要创建一个变量并将 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();

我会继续在 VueJS 中创建一个 method: {}，并将其命名为 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);
   });
 }
}

希望对您有所帮助。

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

Issue Using OwlCarousel with Vue.js

javascript

carousel

vue.js