如何解决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>
先谢谢大家!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。