vue3 ts swiper-slide不能滑动

v-for动态遍历接口取到的数组后不能实现左右滑动

F12发现列表部分没有渲染上

下图展示为正常渲染

解决办法：

就是在swiper里面加了一个v-if判断

<swiper :slidesPerView="3" :spaceBetween="20" :loop="true" :centeredSlides="false" :observer="true"

    :autoplay="{ delay: 2000, disableOnInteraction: false }" :navigation="navigation" :modules="modules"

    class="mySwiper" v-if="dataBaseDetails.length">

    <swiper-slide v-for="item in dataBaseDetails" :key="item.id">

        <div class="card card_default">

            <div class="checkDatabase">

                <div class="left">

                    <img src="@/assets/screen/icon_database.png" alt="">

                </div>

                <div class="right">

                    <div class="card_title">{{ item.name }}</div>

                    <div class="card_content">

                        <div class="detail">地址：{{ item.ip }}</div>

                        <div class="detail">端口：{{ item.port }}</div>

                    </div>

                </div>

            </div>

        </div>

    </swiper-slide>

</swiper>

好像只有在动态渲染列表的时候会出现这个情况