Vue Owl旋转木马在容器外渲染数据

Question

我需要帮助，我的vue-owl旋转木马库正在容器外呈现我的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>

提前感谢各位！

Answer 1

在方法内部调用axios或ajax API之前，您可能必须销毁carrousel，如下所示：

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

一旦得到数据结果，就可以使用updated()vuejs生命周期和$nextTick挂钩来初始化owl-carousel，方法如下：

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