0
184
VistasCómo acceder a this.$refs en <configuración de script> Vue
Estoy tratando de replicar esto , solo con la etiqueta <script setup> que no tiene this palabra clave.
Plantilla (del código que estoy tratando de replicar)
<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 (del código que estoy tratando de replicar)
computed: { swiper() { return this.$refs.swiper.swiper; } } Intenté usar getCurrentInstance() pero, por alguna razón getCurrentInstance().refs devuelven el objeto vacío {} a pesar de que está allí cuando hago console.log(getCurrentInstance()) .
Mi componente <script setup>
<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 Respuestas
Responde la pregunta0
Si quieres el equivalente a:
computed: { swiper() { return this.$refs.swiper.swiper; } } en script setup , solo necesita:
<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
Consulte los documentos de vue en referencias de plantilla: https://vuejs.org/guide/essentials/template-refs.html#accessing-the-refs
Asegúrate de establecer la referencia de la API en "api de composición":
Quieres: const swiper = ref(null) ;
Al menos esa es mi suposición basada en su código. Si esta herramienta de deslizamiento es compatible con vue 3, en teoría debería funcionar.
Como se trata de una referencia, debe usar .value para acceder a ella, por lo que querrá: const handleNextSlide = () => swiper.value.slideNext()
Finalmente, dado que está utilizando mecanografiado, puede hacer algo como const swiper = ref<Swiper | null>(null)