jquery - 动态添加item后，添加了owl-stage-outer之外

Question

我遇到了奇怪的问题我创建了一个通过 vuejs 循环的轮播。

<div class="owl-carousel unitslide">
  <div  v-for="unit in sortedUnits" class="unit" :class="{selected : activeUnit.id === unit.id}" @click="activeUnit = unit">
     @{{  unit.name }}
  </div>
</div>

加载后，上面的代码如下所示。

<div class="owl-carousel unitslide owl-loaded owl-drag">
    <div class="owl-stage-outer">
        <div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); transition: all 0s ease 0s; width: 776px;">
            <div class="owl-item active" style="width: 56.5px; margin-right: 14px;">
                <div class="unit">
                301
                </div>
            </div>
            <div class="owl-item active" style="width: 56.5px; margin-right: 14px;">
                <div class="unit">
                    400
                </div>
            </div>
        </div>
    </div>
    <div class="owl-nav">
        <button type="button" role="presentation" class="owl-prev disabled">
            <div class="arrow left"></div>
        </button>
        <button type="button" role="presentation" class="owl-next">
            <div class="arrow right"></div>
        </button>
    </div>
    <div class="owl-dots disabled"></div>
</div>

通过 vuejs 新项目动态添加更多单元后，添加下面的 owl-dots 禁用标签，如下所示

<div class="owl-dots disabled"></div>
<div class="unit">501</div>
<div class="unit">502</div>

Owl Carousel 未将新项目包装在

中

<div class="owl-item active"></div>

Owl Carousel js是这样的:

$(".unitslide").owlCarousel({
        margin:14,
        items:4,
        loop:false,
        autoWidth:false,
        dots:false,
        nav: true,
        navText: ["<div class='arrow left'></div>","<div class='arrow right'></div>"]

    });

提前致谢。

Answer 1

<div v-if=showTopStore >
   <carousel class="carousel-inner" :autoplay="false" :nav="false" :items="1">
       <div v-for="(store, key) in allStore" class="item" >
           <mobile-store-card :store="store" ></mobile-store-card>
       </div>
   </carousel>
</div>

showTopStore 默认情况下为 False，当数据完全加载时为 True。