How to access this.$refs in <script setup> Vue

Question

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>

script setup does not use syntax like computed: { swiper() {}}. How are you using that? You need to share more code. — cSharp
– 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
– Toldo, Commented May 19, 2022 at 0:55

cSharp · Accepted Answer · 2022-05-19 01:01:51Z

7

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>

answered May 19, 2022 at 1:01

cSharp

3,1891 gold badge10 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Felix Niemeyer Over a year ago

how to get correct typing when doing ref(null) for some HTML element?

mecograph Over a year ago

you could either be very generic by writing ref(null as HTMLElement | null) (see developer.mozilla.org/en-US/docs/Web/API/HTMLElement) or you be more specific and declare the expected type, e.g. ref(null as HTMLCanvasElement | null) (here is a full list: github.com/microsoft/TypeScript/blob/main/lib/lib.dom.d.ts)

Rob Louie · Accepted Answer · 2022-05-19 01:05:50Z

4

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)

answered May 19, 2022 at 1:05

Rob Louie

2,6911 gold badge23 silver badges27 bronze badges

Comments

Onur Doğan · Accepted Answer · 2023-12-06 10:42:14Z

0

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

edited Dec 6, 2023 at 10:42

Onur Doğan

2,11612 gold badges35 silver badges60 bronze badges

answered Nov 30, 2022 at 12:14

Alper Guven

811 silver badge5 bronze badges

Collectives™ on Stack Overflow

How to access this.$refs in <script setup> Vue

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related