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>
提前谢谢各位!
【问题讨论】:
刚刚找到解决办法,把轮播组件包在这个里面:<div v-if="brands.length"> </div>
您可以在答案中回答并接受它。另请查看 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 在容器外渲染数据的主要内容,如果未能解决你的问题,请参考以下文章