在製作 Swiper 輪播時，我希望 mouseenter 到 thumb 時，就會指定到該 slide
但卻出現了以下錯誤：
Uncaught TypeError: imagesSwiper.value.slideTo is not a function
*版本 vue: ^3.3.4 / swiper: ^11.0.3

<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Autoplay, Thumbs, EffectCoverflow } from "swiper/modules";
import "swiper/css";
import "swiper/css/thumbs";

const modules = [Navigation, Autoplay, Thumbs, EffectCoverflow];
const data = reactive({
  data: [
    {
      image: Image1,
      title: "data1",
    },
    {
      image: Image2,
      title: "data2",
    },
    {
      image: Image3,
      title: "data3",
    },
  ],
});

const thumbsSwiper = ref(null);
const imagesSwiper = ref(null);

const setThumbsSwiper = (swiper) => {
  thumbsSwiper.value = swiper;
};

const setImageSwiper = (swiper) => {
  imagesSwiper.value = swiper;
};

const changeSlide = (idx) => {
  imagesSwiper.value.slideTo(idx);
};
</script>

<template>
  <swiper
    :modules="modules"
    :slides-per-view="3"
    :direction="'vertical'"
    :spaceBetween="40"
    watch-slides-progress
    @swiper="setThumbsSwiper"
  >
    <swiper-slide
      v-for="(item, idx) in data.data"
      :key="item.title"
      @mouseenter="changeSlide(idx)"
    >
      <div>
        {{ item.title }}
      </div>
    </swiper-slide>
  </swiper>

  <swiper
    :modules="modules"
    :effect="'coverflow'"
    :direction="'vertical'"
    :speed="1000"
    :coverflow-effect="{
      rotate: 0,
      stretch: -300, // 每個slide之間拉伸值（負值遠離）
      depth: 300, // 值越大圖片越往後退
      modifier: 1,
      slideShadows: false,
    }"
    :thumbs="{ swiper: thumbsSwiper }"
    @swiper="setImageSwiper"
    ref="imagesSwiper"
  >
    <swiper-slide v-for="item in data.data" :key="item.title">
      <div>
        <img :src="item.image"/>
      </div>
    </swiper-slide>
  </swiper>
</template>

解譯bug

Uncaught TypeError: imagesSwiper.value.slideTo is not a function
在 imagesSwiper.value 找不到 slideTo 的 function

錯誤原因

用了 ref 想綁定 imagesSwiper，但這抓到的是整個 swiper 的 HTML 區塊，所以不會有 slideTo 的 function
應使用 @swiper=”setImageSwiper” 來綁定 swiper 實體才能使用 slideTo function

1
2
3

const setImageSwiper = (swiper) => {
  imagesSwiper.value = swiper;
};

如何解決

因為本來就已經有設定 @swiper=”setImageSwiper”，把 ref=”imagesSwiper” 拿掉就可以抓到 swiper 了

🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Lala Code

Solved-swiper.slideTo is not a function

解譯bug

錯誤原因

如何解決

🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

🚀線上課程分享

Hahow

六角學院

Udemy