动态添加项目后，它会在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 disable标签下面添加了>]

<div class="owl-dots disabled"></div>
<div class="unit">501</div>
<div class="unit">502</div>
猫头鹰传送带未在其中包裹新项目>
<div class="owl-item active"></div>
猫头鹰轮播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>"]

    });
提前感谢。

我面临一个奇怪的问题，我创建了一个通过vuejs循环播放的轮播。

[

]

<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（当数据完全加载时）

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>