Attempting to recreate this using the <script setup> tag without the use of the this keyword.
Template (from original code)
<swiper ref="swiper">
<swiper-slide></swiper-slide>
<swiper-slide></swiper-slide>
</swiper>
<a class="swiper-navigation is-previous" @click="swiper.slidePrev()"></a>
<a class="swiper-navigation is-next" @click="swiper.slideNext()"></a>
Script (from original code)
computed: {
swiper() {
return this.$refs.swiper.swiper;
}
}
Attempted to utilize getCurrentInstance() but for some reason getCurrentInstance().refs returns an empty object {} even though it's present when I use
console.log(getCurrentInstance())My <script setup> component
<script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue';
const swiper = // ???
const handleNextSlide = () => swiper.slideNext()
const handlePrevSlide = () => swiper.slidePrev()
</script>
<template>
<div>
<button @click="handlePrevSlide()">Prev</button>
<button @click="handleNextSlide()">Next</button>
<Swiper ref="swiper">
<SwiperSlide>1</SwiperSlide>
<SwiperSlide>2</SwiperSlide>
<SwiperSlide>3</SwiperSlide>
<SwiperSlide>4</SwiperSlide>
<SwiperSlide>5</SwiperSlide>
</Swiper>
</div>
</template>