I'm trying to replicate this, only with <script setup> tag which doesn't have this keyword.

Template (from code that I'm trying to replicate)

<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 code that I'm trying to replicate)

computed: {
    swiper() {
        return this.$refs.swiper.swiper;
    }
}

Tried to use getCurrentInstance() but for some reason getCurrentInstance().refs return empty object {} even though it's there when I do 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>

I'm trying to replicate this, only with <script setup> tag which doesn't have this keyword.

Template (from code that I'm trying to replicate)

<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 code that I'm trying to replicate)

computed: {
    swiper() {
        return this.$refs.swiper.swiper;
    }
}

Tried to use getCurrentInstance() but for some reason getCurrentInstance().refs return empty object {} even though it's there when I do 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>

• javascript
• vue.js
• swiper.js
• vue-script-setup

• Can you share de complete vue component? – Manuel Eduardo Romero Commented May 19, 2022 at 0:22
• script setup does not use syntax like computed: { swiper() {}}. How are you using that? You need to share more code. – cSharp Commented May 19, 2022 at 0:52
• @cSharp The first two code blocks are from code that I'm trying to replicate. I also added the third block with what I'm trying to achieve. – Toldo Commented May 19, 2022 at 0:55

3 Answers 3

If you want the equivalent to:

computed: {
    swiper() {
        return this.$refs.swiper.swiper;
    }
}

in script setup, you just need to:

<script setup>
import { computed, ref } from "vue";
...

const swiper  = ref(null)

// .swiper will only work if the ref swiper (Swiper element) has a property named swiper
const swiperComputed = computed(() => swiper.value.swiper)

...
</script>

<template>
  <Swiper ref="swiper">
    <SwiperSlide>1</SwiperSlide>
    <SwiperSlide>2</SwiperSlide>
    <SwiperSlide>3</SwiperSlide>
    <SwiperSlide>4</SwiperSlide>
    <SwiperSlide>5</SwiperSlide>
  </Swiper>
</template>

Check out the vue docs on template refs: https://vuejs.org/guide/essentials/template-refs.html#accessing-the-refs

Make sure to set the API reference to "composition api":

You want: const swiper = ref(null);

At least that is my assumption based on your code. If this swiper tool is compatible with vue 3 then in theory that should work.

Since this is a ref, you need to use .value to access it, so you'd want: const handleNextSlide = () => swiper.value.slideNext()

Finally, since you are using typescript, you can do something like const swiper = ref<Swiper | null>(null)

If you want to access refs in Options API, you need to wait mounted() hooks.

Note that you can only access the ref after the component is mounted.

Edit: Or onMounted(() => {}) hook

Documentation: https://vuejs.org/guide/essentials/template-refs.html#accessing-the-refs