javascript - 如何在 Vue Js 中使用 swiper 断点

Question

早上好，我正在为前端使用 VueJS 制作一个网站，我已经通过 npm 安装了 SwiperJS，以便 Vue 制作 slider 。它工作正常，但我无法使功能断点具有响应数量的幻灯片。我使用此代码创建了一个响应式帖子部分，其中所有 4 个帖子都显示在 PC View 中，而在移动 View 上一次仅显示一个(您也可以滚动到移动 View 上的帖子)
这是我的代码:
slider .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 '../../api'
  // Swiper Plugins
  SwiperCore.use([Navigation, Pagination, Autoplay]);

  export default {
    data () {
      return { // Retourn the API Dates
        APIData: [],
        swiperOptions: {
          breakpoints: {       
      320: {       
         slidesPerView: 1,
         spaceBetween: 10     
      },          
      770: {       
         slidesPerView: 2,       
         spaceBetween: 50     
      },   
  
      771: {       
         slidesPerView: 4,       
         spaceBetween: 30     
      } 
   }   
        }
      }
    },

    components: {
      Swiper,
      SwiperSlide,
    },
    
    methods: {
      onSwiper(swiper) {
        console.log(swiper);
      },
      onSlideChange() {
        console.log('slide change');
      },
    },
  // Connect to API
   created () {
      getAPI.get('blog/api/list/last',)
        .then(response => {
          console.log('Post API has recieved data')
          this.APIData = response.data
        })
        .catch(err => {
          console.log(err)
        })
    },
  };
</script>

<style lang="sass" scoped>

.swiper-container
    background: linear-gradient(to top left, #BF092D, #8D0923)
    height: 80vh
    padding: 3rem
    .read-more
        padding: 20px
        color: #fff
        float: right
    .swiper-wrapper
        .swiper-slide
            background-color: #fff
            border-radius: 5px
            .text
                padding: 1rem
                h3
                    background: linear-gradient(to top left, #BF092D, #8D0923)
                    -webkit-background-clip: text
                    -webkit-text-fill-color: transparent
            img
                margin: auto
                display: block
                width: 100%
                height: 45% 
                border-radius: 5px 5px 0px 0px
</style>

Answer 1

您需要像这样将选项对象传递给 Swiper:

<swiper
    :breakpoints="swiperOptions.breakpoints"
>

也适用于其他属性: https://swiperjs.com/vue .
Vue 组件一次获取一个属性。这也可以使用 devtools 进行检查: