为什么 Swiper 在 VUEJS 中不起作用？

Question

嗨，我正在尝试在 vue cli 中使用 Swiper，但它对我不起作用。 我正在阅读官方文档，似乎没有什么问题，我尝试复制和粘贴，但也不起作用。 https://swiperjs.com/vue

  <template>
        <div>
            <Swiper :slides-per-view="4" :space-beetween="50">
                <SwiperSlide>SLIDE 1</SwiperSlide>
                <SwiperSlide>SLIDE 2</SwiperSlide>
                <SwiperSlide>SLIDE 3</SwiperSlide>
                <SwiperSlide>SLIDE 4</SwiperSlide>
            </Swiper>
        </div>
    </template>
    <script>
        import { Swiper, SwiperSlide } from 'swiper/vue';
        export default{
            name: 'Swiper',
            components: {
                Swiper,
                SwiperSlide
            }
        }
    </script>

它给了我这个错误：

vue.runtime.esm.js?2b0e:4484 Uncaught RangeError: Maximum call stack size exceeded
at isWhitespace (vue.runtime.esm.js?2b0e:2533)
at Array.every (<anonymous>)
at resolveSlots (vue.runtime.esm.js?2b0e:2525)
at initRender (vue.runtime.esm.js?2b0e:3485)
at VueComponent.Vue._init (vue.runtime.esm.js?2b0e:5003)
at new VueComponent (vue.runtime.esm.js?2b0e:5154)
at createComponentInstanceForVnode (vue.runtime.esm.js?2b0e:3283)
at init (vue.runtime.esm.js?2b0e:3114)
at createComponent (vue.runtime.esm.js?2b0e:5978)
at createElm (vue.runtime.esm.js?2b0e:5925)

Answer 1

您的代码不起作用，因为您没有初始化 Swiper。

尝试在您的设置中添加此代码：

const swiper = ref();

    function init(instance) {
      swiper.value = instance;
    }

不要忘记返回函数init。

然后将其添加到您的 Swiper 组件中：

@swiper="init"

像这样：

            <Swiper
            class="w-full flex items-center justify-center"
            grab-cursor
            update-on-window-resize
            navigation
            :pagination="{ clickable: true }"
            :scrollbar="{ draggable: true }"
            :slides-per-view="isMobile ? 1 : 2"
            @swiper="init"
          >

Answer 2

更新：在 Vue 中使用 Swiper v11.1.3

 <swiper-container
   :slides-per-view="4" 
   :space-beetween="50"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper-container>

您必须注册Swiper：

<script setup>

  import { register } from 'swiper/element/bundle';
  register();

</script>