0
187
ViewsHow to access this.$refs in <script setup> Vue
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>
2 answers
Answer question0
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>
0
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)