如何在 VueJS 中初始化 Swiper？

Question

首先感谢您抽出宝贵时间，因为我整个上午都在讨论这个问题。如何在 vue.JS 上使用https://idangero.us/swiper模块？确实 Swiper 在页面上，但参数似乎没有被计算在内。

我也尝试过 vue awesome swiper，但我更喜欢使用没有错误的官方版本。我试图在导入后也在 const 中初始化 swiper。

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <v-touch
         @tap="navigateTo(item)"
         v-for="item in subList"
         :key="item._id"
         class="swiper-slide"
      >
        {{t(item.sentence)}}
      </v-touch>
    </div>
  </div>
</template>

<script>
  import Swiper from 'swiper'
  import 'swiper/dist/css/swiper.css'
  import 'swiper/dist/js/swiper.js'
  export default {
    name: 'category',
    data () {
      return {
        subList: [{some data}],
      }
    },
    mounted () {
      this.initSwiper()
    },
    methods: {
      initSwiper () {
        const mySwiper = new Swiper('.swiper-container', {
          slidesPerView: 3,
          slidesPerColumn: 2,
          spaceBetween: 50
        })
        mySwiper.init()
      }
    }
  }
</script>

<style scoped>
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 2px white;
  width: 200px;
  height: 200px;
}
</style>

例如，使用此代码，我需要在每个 div 之间留一个空格或仅 2 行，但我没有空格和 3 行...谢谢您的帮助。

Answer 1

mounted : function(){
        var swiper = new Swiper('.swiper-container', {
                      slidesPerView: 7,
                      spaceBetween: 0,
                      slidesPerGroup: 7
                    });

},