时间戳

首页 > 解决方案 > Vue Owl Carousel 在容器外渲染数据

javascript - Vue Owl Carousel 在容器外渲染数据

问题描述

我需要帮助，我的 vue-owl-carousel 库正在容器外渲染我的 vue js 数据，但是当我手动输入数据时它工作正常，这是我的代码到目前为止：

输入：

<carousel class="mb-2" :dots="false" :nav="false" :responsive="responsiveT1" :items="3">
    <div class="mx-1 item" v-for="(brand,index) in brands" :key="index">
        <img class="brand-image" :src="brand.url" @click="redirect(brand.slug)"/>
    </div>
</carousel>

输出：

<div id="carousel_s4nwluywy5e" class="owl-carousel owl-theme owl-loaded owl-drag">
   <div class="owl-stage-outer">
      <div class="owl-stage"></div>
   </div>
   <div class="owl-nav disabled">
      <div class="owl-prev">next</div>
      <div class="owl-next">prev</div>
   </div>
   <div class="owl-dots disabled"></div>
   <div class="mx-1 item">
       <img src="storage/sample.jpg" class="brand-image">
   </div>
   <div class="mx-1 item">
       <img src="storage/sample.jpg" class="brand-image">
   </div>
   <div class="mx-1 item">
       <img src="storage/sample.jpg" class="brand-image">
    </div>
</div>

预期输出：

<div id="carousel_s4nwluywy5e" class="owl-carousel owl-theme owl-loaded owl-drag">
   <div class="owl-stage-outer">
      <div class="owl-stage">
          <div class="mx-1 item">
              <img src="storage/sample.jpg" class="brand-image">
          </div>
          <div class="mx-1 item">
             <img src="storage/sample.jpg" class="brand-image">
          </div>
          <div class="mx-1 item">
            <img src="storage/sample.jpg" class="brand-image">
          </div>
      </div>
   </div>
   <div class="owl-nav disabled">
      <div class="owl-prev">next</div>
      <div class="owl-next">prev</div>
   </div>
   <div class="owl-dots disabled"></div>
</div>

先谢谢各位了！

标签： javascripthtmlvue.jsvuejs2owl-carousel

解决方案

也许你必须在你的 axios 或 ajax API 调用之前销毁 carrousel，如下所示：

$('.yourSelector').trigger('destroy.owl.carousel');

一旦你得到数据结果，你就可以使用updated()vuejs lifeCycle 和$nextTickhook 这样的方式来初始化 owl carousel：

updated() {
  this.$nextTick(function () {
    $('.yourSelector').owlCarousel({
      loop: false,
      rewind: true,
      margin:10,
      nav:true,
      ...
   )}
  })
}

推荐阅读