vue-owl-carousel 不处理动态数据

Question

我用手动数据尝试了这段代码，它运行良好，现在我正在将数据从数据库中提取到轮播，但它只是将所有图像加载到页面上，而不是在它们之间滑动。这是我的代码

<carousel :margin="20"
              :autoplay="true"
              :items="3"
              :loop="true"
              :nav="true"
              :navText="[`<span class='fas fa-angle-left text-bold h3'></span>`,`<span class='fas fa- 
               angle-right text-bold h3'></span>`]"
              :dots="false"
    >
        <div v-for="(project, index) in projects" :key="index" :class="index === 0 ? 'active': ''">
            <img :src="project.cover_image" alt="image" >
        </div>


    </carousel>

Answer 1

您只需在轮播中添加v-if="projects.length > 0"

<carousel v-if="projects.length > 0">
    <div v-for="(project, index) in projects" :key="index">
        <img :src="project.cover_image" alt="image" >
    </div>
</carousel>

vue-owl-carousel 不处理动态数据

vue-owl-carousel not working with dynamic data

laravel

vue.js

owl-carousel-2