Vue Owl Carousel 在容器外渲染数据

Posted

技术标签:

【中文标题】Vue Owl Carousel 在容器外渲染数据【英文标题】:Vue Owl Carousel Rendering Data Outside the Container 【发布时间】:2021-08-24 04:12:00 【问题描述】:

我需要帮助,我的 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>

提前谢谢各位!

【问题讨论】:

刚刚找到解决办法,把轮播组件包在这个里面:&lt;div v-if="brands.length"&gt; &lt;/div&gt; 您可以在答案中回答并接受它。另请查看 Dharman 给出的答案 【参考方案1】:

也许您必须在这样的方法中调用 axios 或 ajax API 之前销毁轮播:

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

一旦你得到数据结果,你就可以使用 updated() vuejs lifeCycle 结合 $nextTick 钩子来初始化 owl carousel:

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

【讨论】:

以上是关于Vue Owl Carousel 在容器外渲染数据的主要内容,如果未能解决你的问题,请参考以下文章

vue-owl-carousel不能与v-for一起工作。

owl-carousel jquery 调取数据循环

调整owl-carousel的高度

有没有办法改变owl-carousel的光标? (不是 owl-dots 或 owl-nav)

owl-carousel 无法阻止默认

Meteor:模板用数据渲染后调用函数