标签: vue3-carousel

早上好，我正在使用 VueJS 作为前端制作一个网站，我已经通过 npm for Vue 安装了 SwiperJS 来制作滑块。它工作正常，但我无法设置功能断点来获得响应数量的幻灯片。我使用此代码制作了一个响应式帖子部分，其中在 PC 视图中显示了所有 4 个帖子，在移动视图上一次仅显示一个帖子（您也可以滚动到移动视图上的帖子）

这是我的代码：

滑块.vue

<template>
  <swiper
    :slides-per-view="4"
    :space-between="20"

    >
    <swiper-slide v-for="posts in APIData" :key="posts.slug">
      <img class="card-img-top" v-bind:src=posts.image alt="Card image cap">
      <hgroup class="text">
        <router-link to="/single"> <h3>{{posts.title}}</h3> </router-link>
        <p>{{posts.desc.substring(0,80)+".." }}</p>
     </hgroup>
    </swiper-slide>
  </swiper>
</template>

<script>
  // Import Swiper Vue.js components
  import SwiperCore, { Navigation, Pagination, Autoplay } from 'swiper';
  import { Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/swiper.scss';
  import 'swiper/components/pagination/pagination.scss';
  import 'swiper/components/navigation/navigation.scss';
  import { getAPI } from …

我正在使用vue3-carousel包在我的项目上显示images/videos。对我来说，我遇到了意想不到的问题。我不知道为什么ref我的模板没有更新。我在vue组件中有这个逻辑，如下所示。

模板：

<carousel v-if="presentedImages.length" :items-to-show="2" :snapAlign="'start'" :breakpoints="breakpoints" :wrap-around="true">
    <slide class="slide" v-for="image in presentedImages" :key="image.id">
        <img v-if="image.attachment_url" class="videoFile" :src="image.attachment_url" />
        <div  @click="deleteImage(image.id)" class="fa-stack remove-button cross-btn">
            <i class="fa fa-times"></i>
        </div>
    </slide>
    <template #addons>
        <navigation />
    </template>
</carousel>

脚本：

const presentedImages = ref(props.images);
const deleteImage = (id) => {
    removeAttachment(id).then(res => {
        presentedImages.value = presentedImages.value.filter(img => {
            return img.id !== id;
        });
    })
    .catch(err => console.log(err))
}

您能回答我为什么当我删除图像时轮播组件中的数据没有更新吗？仅供参考：参考正在脚本中更新。