小编Leo*_*sso的帖子

早上好，我正在使用 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 …